Web制作を始めたばかりの頃は、慣れない作業でWebデザインの制作にものすごい時間を費やしていました。
しばらく経って、ツールに慣れたこともあってか少しはスピードが上がりましたが、それでも締め切りに間に合わず、作業していたら朝を迎えてしまったということも。。。
これじゃあいけない！と思ってWebデザインをスピードアップする方法を必死で探しました。
Webデザインのスピードが上がらず悩んでいる方も多いかと思います。
そんな方や、初心者の方でもできそうなスピードアップの方法をご紹介していきますね。
・Webデザインを効率よくしたい
・Webデザインのヒントが知りたい
・Webデザインで使えるツールを知りたい
という悩みがある方におすすめの記事です！
目次
Webデザインのアイデアを考える
Webデザインを考えるときは、何を参考にしていますか？
いろいろな参考Webサイトを見すぎると、逆にアイデアがまとまらないこともあります。
そこで、効率よくアイデアを生み出せるようになる方法をご紹介します。
・日頃からいろんなデザインをインプットする
Webデザインの参考はWebサイトだけではありません。
普通に生活していて目に入るデザインはたくさんありますよね。
看板、印刷物などのチラシ、フリーペーパー、メール、バナー、など
これらは何も意識せず見ることがほとんどだと思いますが、日頃からデザイナー目線でいろいろなものに注目してみましょう。
レイアウト、色の使い方、イラスト、とても参考になります。
・気に入ったデザインは保存する
せっかく良いデザインを見つけても、その場限りでは意味がありません。
・紙類は持ち帰る
・手に入らないもので可能であれば写真を撮る
・web上のデザインであればもちろんデータ保存しておく
忘れないためにも保存をする癖をつけておいて、後から見返せるようにしておきましょう。
お気に入りのデザインを集めた自分だけのデザイン集を作るのは楽しいですよ。
そのとき気をつけたいのは、ジャンル別にまとめておくこと。
ふせんを貼ったり、コメントを書いたり、すぐアイデアとして使えるように整理しておくと便利です。
・Webデザインのアイデアに使えるサイトツール
Webデザインのアイデアの参考になるサイトや、収集ツールをご紹介します。
・MUUUUU.ORG
MUUUUU.ORGはWebデザインのリンク集サイトです。
サイトデザインもシンプルで使いやすく、最小限の情報だけなので探しやすい設計になっています。
掲載されているWebサイトはWebデザインの参考になりそうなクオリティの高いサイトばかりで、更新頻度も高めです。
Webサイトデザインなら、まずはMUUUUU.ORGをチェックしてみてください。
・LP ARCHIVE
引用元：https://rdlp.jp/lp-archive/
ランディングページ専門のWebデザインまとめサイトです。
運営歴が長く、現在29000をこえるLPサイトが登録されています(PCサイト)。
機能も充実していて、人気のLPや最新のLPに並べ替えることもできます。
・BANNER LIBRARY
引用元：https://design-library.jp/
バナー専門のギャラリーサイトです。
Webサイト制作でバナーを作る方も多いのではないでしょうか。
BANNER LIBRARYはトレンドを押さえたバナーが多く掲載されていて、更新頻度も高めです。
便利なのがハッシュタグ付きなところで、好きなハッシュタグをクリックすると関連するバナーがたくさん表示されます。
Pinterestは、Web上にある画像や動画を保存しておけるサービスです。
ユーザー登録をすれば、パソコンでもスマホでも簡単に好きなデザインを保存することができます。
保存をするときは新規ボードを作成し、名前をつけてジャンル別に分けておくと便利です。
Google Chromeの拡張機能を使うと、単体の画像だけではなく、Webサイト全体のデザインを保存しておくことも可能になります。
・Google Keep
Google Keepとは、Googleが提供しているメモアプリです。
シンプルだけど使いやすい機能がそろっていて、生活に便利なアプリです。
デザインをインプットするときにも重宝します。
画像やURLを、コメントや音声メモと一緒に保存することができます。(音声メモはスマホ版だけ)
リマインダー機能もあるので、アラームを設定したり、デザインのToDoリストの管理に便利です。
効率よくWebデザインしていく
Webデザインをスピードアップさせるにはデザインツールを使いこなすことや、正しい作業手順で効率よくデザインしていくことが大切です。
ショートカットキーを使う
初心者はもちろん、意外とベテランデザイナーでもショートカットキーを使いこなせてない人は多いです。
ショートカットキーってたくさんあって覚えるのが大変ですよね。
でもそこは面倒くさがらずに作業しながら覚えていきましょう。
Photoshop、Illustrator、Figmaなど、ショートカットキーを活用すると作業効率がグンと上がります。
PhotoshopとIllustratorはオリジナルのショートカットキーの登録もできます。
よく使うパターンの機能があれば、登録しておくと便利です。
レイアウトを決めてからデザインする
いきなりパソコンでデザインツールを立ち上げてからデザインし始めていませんか？
何もない状態から始めてしまうと、途中で考え込んでしまって余計に時間がかかります。
どのデザインをするときでも、順番通りに進めていくのが効率アップの近道です。
簡単に、Webデザインの流れをまとめました。
1.作りたいサイトのコンセプトを元にデザイン案を考える
2.手書きでデザインの構成を簡単にまとめる
3.2を参考にレイアウトしていく(ワイヤーフレームが必要な場合はここで)
4.レイアウトを元に決まっているパーツやテキストを配置する
5.細部のデザインを仕上げていく
最初にコンセプトやレイアウトをしっかり決めておくと、途中で考えがブレたりしなくなるのでデザインもスピードアップできます。
よくあるオンラインスクールで、コンセプト、色、テキストなどが指定された状態でデザインするっていう課題がありましたが、理にかなっているなぁと思いました。
ある程度最初にいろいろ決めておくと、デザインすることだけに集中できます！
よく使うデザインパーツを保存しておく
どこにでも使えそうなデザインパーツはわかりやすく保存しておきましょう。
特に自作のパーツは色やデザインをすぐ変更して使えるように、IllustratorやPhotoshopなどのツール形式で保存しておいた方が良いです。
毎回オリジナリティがあふれるデザインに挑戦するのは素晴らしいことですが、アイコンなどのパーツはよく見るシンプルなデザインが好まれます。
時短のためにもコピペしてWebデザインを仕上げていきましょう。
Webデザインの経験値をあげる
とにかく最初はたくさんWebデザインしていくしかないです。
自分にはセンスがないからなかなか上達しない、って思っていませんか？
デザインは数をこなすことで磨かれていくものなので、試行錯誤を繰り返していろんなデザインを作ってみてください。
たった1ヶ月前のデザインを見直すだけでも、上達しているのが目に見えてわかるようになりますよ。
また、デザインを繰り返すことで成功パターンがわかり、失敗するデザインに費やす無駄な時間がなくなります。
まとめ
初心者の頃は、ツールも使いこなせず、思い通りのデザインができず、行き詰まってしまうことがたくさんありました。
デザインはすぐ上達できるものではないので、効率よくデザインできる方法を覚えながらスピードもスキルも上げていきましょう。
Webデザインをスピードアップすることで無駄な時間がなくなり、新しいデザインや学びたいことを学習する時間もたくさん作れます。
Webデザインのスピードアップ方法として参考になれば嬉しいです。
コメント