Cntlog > スキルアップ・ノウハウ

Sketchでワイヤー/デザインテンプレートを作る時に便利なUIキット

SketchはUIデザインのツールですが、ワイヤーやモックを作ときも便利です。
簡単すぎて打ち合わせの中で画面を作りながら話をすることもあります。

やはりクライアントさんと話を進めるときは対面しながら同じものを見てやれると話が進めやすいです。

本記事では、ワイヤーを作るときに私が使っているテンプレートを幾つか紹介します。

UI系の素材

Atomic Design Template Sketch Resource

Atomic Designのワイヤーフレームテンプレートです。

データをダウンロードする

Wireframe Kit for Atomic Design Sketch Resource

こちらもatomic designを意識したものですがUIパーツが豊富です。
こういうのを一つ持っておくと、便利です。

データをダウンロードする

Mobile UI Wireframe Kit Sketch Resource

アプリなどで、画面のフローを考えるときに便利です。
最近プロトタイプも流行っているので、デザイナ/プログラマとのコミュニケーション、意識合せをするのによく使います。

データをダウンロードする

有料で使いやすいもの

Sketchは色んな人がダウンロード出来るように無料でUIを公開しているのですが、有料のものもあります。

私も最初は無料のものばかり使っていたのですが、最近は有料のものを購入してそっちを使い続けてる事が多いです。

購入する場所

幾つかUIテンプレートを購入できるサイトはあるのですが、私はui8さんが気に入ってここで探して購入しています。

https://ui8.net/

気に入ってる点は、価格が安い(5000円くらいで大体買える)ところと、人気のもの、新しいもの、セール中のものが簡単に探せるからです。

またカテゴリもUI Kitやワイヤーフレームなどに分けられていて必要なものが探しやすいからです。

singleton-2

LPなどに使えるテンプレートです。
ブログやEC系などジャンル別によく使うデザインが含まれているので、組み合わせでデザインに反映できます。

価格 $48
https://ui8.net/products/singleton-2

Frames Wireframe Kit

主にPC版になりますが、これ一つでクライアントとの打ち合わせがスムーズにいけます。
色んなレイアウトのデザインがあるのでこれに構成していくだけで、いい感じのページを作っていけます。

あと、有料の素材系の中ではめずらしく、$12と格安です。

価格:$12
https://ui8.net/products/frames-wireframe-kit

その他

Sketch Hunt Arrows and Lines Pack Sketch Resource

データをダウンロードする

Phoenix Startup UI Kit Pro

こちらも、組み合わせでサイトが作れちゃう系ですが、これの凄いところはこのデザインのHTML/CSS/JSのテンプレートが含まれているところです。

Sketchで確認をとれたらすぐにコーディングの方でその組み合わせを反映してすぐに公開まで辿りつけます。

価格:$88
https://ui8.net/products/phoenix-startup-ui-kit-pro

最後に

Sketchは軽くて、使いやすいので様々な場面で活躍します。

デザインのテンプレートも豊富にあるので、デザイナがいないときでも組み合わせで素敵なデザインが出来上がります。

短縮できた時間はコンテンツやマーケティングを考えるのに使えるとよいですね(ゝω・)

Cntlog > スキルアップ・ノウハウ

Udemyの口コミ・評判を調べてみた

Udemy(ユーデミー)の口コミや評判を調べてみました。

何気なく調べてみると、満足してる人、いまいちだった人といますが大方満足しているひとが多かったです。

良かったという口コミ

通勤時にも使いやすいUdemy

私もこれらの方と同じ感想ですが通勤時に使っていて使いやすかったです。
Udemyのいいところは動画をダウンロードしておけるので、通信容量を圧迫することはないのでありがたいです。(結構ダウンロードしておける動画学習のサイトって少ないんですよね)

Udemyのセールと価格について

Udemyの人気の理由は私は価格だと感じています。
口コミを調べていると、皆さんコスパの良さを言及している方が多いです。

だいたい何らかしら、セールをやっていることが多いので安くなっているときにまとめて買っている方が多いみたいです(私もその一人です)

安くなっていないか、ついついチェックしてしまいます。

Udemy

内容についての口コミ

私もudemyの動画は内容の質が高いのが良いところだなと感じています。
本などですと、初心者向けで全体をカバーするものが多かったりするのですが、udemyですとピンポイント知りたいところを学べたり、講師の方に質問できるのが良いなと思っています。

悪かったという口コミ

確かに私も「うーん」と思う動画には出会ったことはありますが、講座を買う前に一部視聴できますし、評価やコメントとみて購入を購入を決めていますね。

私も買って失敗したかな?と思う講座はありましたが、udemyには30日返金制度があるので、それを利用すると良いですよ。

確かに外で動画を見ようとすると結構重くなってしましますので、私は外で見るときはあらかじめ講座をダウンロードしています(一括のダウンロードや講座の章毎に個別ダウンロードするなど選べます)

最後に

Udemyの口コミや評判を調べて見ましたが、大方私も同じ感想で多くの人を満足させているサービスだなと思います。
特に満足されている方はプログラミングやWeb系の方が多いようですね。

私自身でUdemyを使ってみた感想を下記で記事にしているので、よかったらごらんください。

動画学習サービスUdemy(ユーデミー)を1年間利用してみた評判と感想

Cntlog > スキルアップ・ノウハウ

Webデザイナーとして成長し続けるために気をつけている事

IT業界にいると成長してあたり前のように思われがちですが、成長のスピードにはやっぱり差があります。
私も最初は手探りでスキルアップしていましたが、慣れてくると自分の生活の一部にまで落とすことができました。

本記事では、私が日頃心がけている事を紹介します。

情報収集を定期的にする

成長と言っても何をやるか、これから何が必要かなど業界の情報を得るのは重要です。
IT業界は変化のスピードが早いので去年できていたことしかできないようですと、それは成長をとめているわけではなく、退化になります。
若手はどんどん成長していますので、油断しているとすでに先を越されてしまします。

かといって情報収集して、インプットするだけでは自分の糧になりにくいのでちゃんとアウトプットも必要です。
情報収集→情報発信が基本です。

私の情報収集方法は以前記事にまとめていますので、下記をご覧ください。

Webデザイナーにオススメしたい雑誌からの情報収集
時間の無いWeb屋が実践してる効率的な情報収集

仕事以外でもインプットとアウトプットをする

情報収集って気がつくと、普段の仕事に関わることばかりになってしますのでが並行して自分の興味のあるものを調べてみてください。

やりたくない仕事もあると思いますので、好きなことを調べているときはそれが息抜きになって本業もスムーズに進めれたります。

仕事以外にも学ぶのか…と躊躇してしまう方もいますよね。
個人的には別に就業時間外で勉強はしなくてもいいとは思っています。
じゃあなんで私が日々勉強しているかと言うと、自分がちゃんと仕事出来るようにするためです。

ずっと今の会社にいるのであれば、多分仕事を片付けてるだけで評価はされていくと思います。
今後転職するときなどには、業界で通じるスキルが求められますので自分がやりたい事、続けれそうな事を学び続けて「保険」をかけているだけです。

お陰で私はいつ会社を辞めても次が見つかるくらいのスキルは見つけれましたので、割りと気楽に働けています。

先程の話と重複しますが、インプットだけだと評価がされにくいのでアウトプットも一緒にしておくとポートフォリオにも使えてます。
大体転職しようとすると、作品が無くて応募に困るとか年収が下がってしまう傾向にありますからね…

もしあなたが転職の事を考えてるのでしたら、以前記事を書きましたのでよかったら見てください。

Webデザイナーが転職するために初めにやっておくこと

定期的にコードを見直す

コーダーであれば、自分でコードを書くでしょうがメンテナンスとかしていますか。
gitなどがあればチョットずつ進めれたり、人からレビューをもらえたりして成長したりできるので自分で書いたコードを見直さないので自分でそのチャンスを奪っている事になります。

もしあなたがgitに興味を持っているなら、ぜひgithubをはじめて見てください。
コードを公開すれば、人の役にも経ちますし、人に相談もしやすくなりますのでコードを見直す機会が増えます。

余談ですが、gitが使えるとリモートワークもしやすくなって、今後の働き方の選択肢がぐっと広がりますよ。

リモートワークの副業に興味がある方はコデアルさんがオススメです。
興味があるかたは下記記事をご覧ください。

副業に最適なリモートワークOKな求人サイト コデアルがオススメ

人のコードを見る

コードを見ないと言うのは、自分のコードだけで無く人のコードも含みます。
人のコードを見ると言っても何からはじめていいかわかんないですよね。

私がオススメするのはフレームワークやライブラリのコードを見る事です。
理由としては下記です

  • 大勢の人が使いやすい設計になっている
  • readmeやDocumentがあって読みやすい
  • 読んだコードを業務で活かしやすい
  • TOPレベルの人たちのコードや設計に触れられる
  • 自分の知らない記述を知る機会が増える

Bootstrapなんかだと普段自分が使って無くても、引き継いだ案件やこれから一緒に組む人が使ってる可能性は高いので、損はしないかなと思います。

他にも質問サイトのコードを見て自分で回答するのも力になりますよ。

そういったサイトですが、Q&Aサイトの「teratail」さんあたりが一般的ですね。
PHPやRubyとかのコードが多いと思われがちですがCSSとかJSも結構ありますので、多分答えれるものが幾つかあるはずですよ。

teratail

時間をちゃんとかけてやりきる

とりあえず、触って見るというのは大事なんですが、基礎だけ触って見るだけだと中々スキルにまで至らないんですよね。

ちょっとだけ勉強するのが悪いというわけではないので、誤解の無いように。

かと言って、はじめっからいつも全力で!みたいなスタンスだとしんどいので、ちょっとずつ新しい事をや気になる事をはじめて、力試しみたいにどこかできちんとやりきるみたいなタイミングを作ると良いです。

その時の全力でものを作ると人に評価もしてもらいやすいのでオススメです。

スキルって目に見えるものではないので、時々その成果を形にしておくと思ってもいないチャンスが訪れたりします。

流行りのものばかり触らない

繰り返しになりますがIT業界は変化のスピードが早いです。

今流行ってるものばかり触っていると、自分が何が得意な人なのか説明できなくなります。
人の時間は無尽蔵にあるわけではないので、自分の将来に役立つスキルを選定する必要があります。

例えばWebデザイナを一言で言っても、グラフィックのセンスやプレゼンスキル、コーディングのスキルなんかがぱっと出てきますが、今後の将来を見据えるとAIや自動化に合わせるために、解析のスキルや統計学を学ぶという選択肢もあります。

他にも動画に手を出すという案もありますね。

業界が求めている分野ではなく、自分が必要な分野を学ぶようにするのがオススメです。

新しい事へのチャレンジをし続ける

同じことばかり続けていても、成長はしづらいです。

ちょっとずつでも新しい事は初めて行くと飽きずにいて楽しいです。
何をやっていいかわからないという人は、自分に身近な別の職種の人がやってることに興味を持ってみてはいかがですか?

デザイナーであれば、ディレクタやプログラマなどと関わることが多いと思いますのでその人達がやってる事で自分にもできそう、やってみたいというものがあればそっちの方向に手を出してみるのはいかがでしょう。

自分で考えるクセを持つ

SNSなどをしてると毎日人の面白い投稿を目にして刺激を受けます。

バズったものなどを見て、自分ならどうする?とか考えると自分に出来ること、できない事が見えてきます。
何より「人に求められるものは何か」という事がひらめきやすくなるのでビジネスチャンスや社内の評価が上がりやすくなります。

私は「俺の嫁が可愛い」というサイトを作ってバズったので、これが最高の成功例かなと思います。
その当時の振り返りは下記をご覧ください。
公開6日で100万PVを叩き出したWebサイト「俺の嫁が可愛い」を公開してみて

自分で考えるクセを付けないと「指示待ち人間」になったりなぜこれが良いのか「説明できない人間」になりやすいので、色んなところで損をしてしまいます。
誰かに頼るのは悪いことでは何のですが、頼らないと一人でできない事ばかりだと、自分でやりたい事もできずに詰んでしまいますね。

人のアドバイスを聞く

私って頑固なんですけど、信頼してる人のアドバイスはちゃんと聞くようにしています。

やってみたら良いよとか、こうしたらどう?とかアドバイスをもらったらまずは否定をせずにはじめて見ます。
やってみて駄目だったら、ゴメンなと謝るようにしています。

こうしていると自分一人では気がつけな経験値が溜まります。
否定をすることは簡単ですが、それで得るものはないので、まずはやってみるの精神はオススメです。
失うのは時間と時々ちょっとのお金くらいですが、私は得たもののほうがデカイです。

Web以外の趣味を持つ

Webの勉強ばかりしてるとはっきり言って視野が狭まります。
自分の仕事にかかわらない趣味を持つと息抜きにもなりますし、ユーザーに視点でものが見えるようになります。

私の場合ですと、自転車が趣味なのですが勉強の合間に走って息抜きをしています。

仕事以外で自転車関係のサイトや実店舗に行く機会が増えますのでユーザーの気持ちを取り戻す事ができます。(仕事してると、どうしても開発者目線になってしまうんですよね)

言い訳をしない

こんな言い方をしてしまうと、凄いプレッシャーを感じるかもしれませんができなかったときに「次はこうやる」と期限を決めたり手段を固定してるだけです。

できなかった言い訳をしても、自分を納得させるだけで成長には繋がりません。(もちろん病気でとか、自分に非がないもののありますが、どちらにしても言い訳しても良いことないんですよ)

人に評価してもらう

アウトプットが前提になりますが、なるべく人に評価してもらったりしています。
そんな堅苦しくなく、こんなの「今作ってるんだけど、どう?」とかかなり気楽なものです。

私の場合サイトの解析も得意なので、どっちのバナー/コピーのほうが反応が良いか、SEOでのテストとかGoogleアナリティクスで評価を見たりもします。

やりっぱなしよりも、反応を自分で受取にいくと次やるときのモチベーションにも繋がるので良いですよ。

最後に

Webデザイナの仕事しててすごいなって思うのは10年以上やってても常に学びはあるしやりたいことはどんどん溢れてくるとこです。

そんな中でも若手ですごい人はどんどん増えてきて上の世代に噛みついてる感じも好きで、私はこのプレッシャーのなかで、成長していくのがすごく楽しいです。

もし勉強はちょっと…ていう人は副業という方法もあります。
私は副業もしているのですが、自分の将来に投資ということでしたらこちらの方法もオススメですよ。
Webデザイナーにオススメな副業の始め方

でも働きたくないって気持ちが毎年どんどん高まってるんですけどね(ゝω・)

Cntlog > スキルアップ・ノウハウ

Webデザイナーが3日でスマホアプリを公開した方法

最近自分でアプリを作って公開しました。(褒めてください!)

ホウビンゴ

まじめに3日くらいで作りました。
以前にも一度アプリを出したことはあったのですが、ちょっとコードを変えただけのパッケージものだったのでアプリ作ったとは言いづらかったのですが、今回はちゃんとコードを0から書いて自分でアプリを作りました

作った理由というかきっかけは友人がアプリ開発の書籍を最近出したからです。
Ionicで作る モバイルアプリ制作入門〈Web/iPhone/Android対応〉

私はこの書籍のメインユーザーの想定に近いということでこの本のレビューに少し参加しています。

レビューした時に「あっ、これ私アプリ作れるわ」みたいな気持ちになったので、年末の連休を利用してアプリを作りました。

この記事では、この本を通じて約3日でアプリを公開した一連の流れを紹介します。

“Webデザイナーが3日でスマホアプリを公開した方法” の続きを読む

Cntlog > スキルアップ・ノウハウ

Webデザイナがアフィリエイトを始めて学べること

去年から少しずつアフィリエイトを始めました。
きっかけはこのブログに広告を貼ってほしいを言われたのがきっかけです。

タイミングと商材との相性がよかったせいか、すぐに成果は出てきましたので、それで興味を持ちました。

もともとブログを書くのは苦ではなかったので、アフィリエイトをやることに抵抗はなかったです。

今でこそ、アフィリエイトを通じて学べる事が多くあったので、やっていてよかったなとか思ってます。

“Webデザイナがアフィリエイトを始めて学べること” の続きを読む

Cntlog > スキルアップ・ノウハウ

動画学習サービスUdemy(ユーデミー)を1年間利用してみた評判と感想

何かを学ぶというと人に習うか、本で学ぶ事がわりと多かったのですが、最近は動画で学ぶ機会も増えました。

私はUdemy(ユーデミー)という動画学習サービスを利用しています。
今回は一年間ほど、使った感想とUdemyの紹介をしていきます。

世界最大級のオンライン学習サイトUdemy

“動画学習サービスUdemy(ユーデミー)を1年間利用してみた評判と感想” の続きを読む

Cntlog > スキルアップ・ノウハウ

Webデザイナーが効率よくHTMLコーディングができるPugのメリット

2014年頃からPug(当時はjade)を使ってHTMLのコーディングを進めてました。
最初はこんな書き方もできたほうが良いのかなくらいで考えていたのですが、最近ではPugがないほうがしんどい状態になってきました。

保守が苦手だったり、修正時にミスが多い人はPugを使うことでコーディングの質を向上させることができます。

今日はそんなPugのメリットをご紹介します。

“Webデザイナーが効率よくHTMLコーディングができるPugのメリット” の続きを読む