WEBデザイン・プログラミング関連の
情報発信を手掛ける STAND4U

HOME > WEBデザイン > WEBデザインの「スピードアップ方法」と「短縮時間の有効活用」方法！

WEBデザインの「スピードアップ方法」と「短縮時間の有効活用」方法！

WEBデザイナーに「欲しいスキル」を聞いたら「デザインスピードを上げる」という内容は、上位にランクインするだろう！

私はデザイン歴が長いので自慢にはならないですが、デザインスピードにはちょびっと自信があります……。

デザインのスピードを上げる方法の前に、ひとつだけ注意点があるんです！

実は、WEBデザインのスピードを上げる事ばかりに注力する事は「諸刃の剣」なのです。

WEBデザインのスピードを上げる(事ばかりに意識をとられる)と、失うものがあります。

それは「デザインクオリティ」です！！

いや、クオリティを保ったまま、スピードアップする方法が知りたいんだってばよ？

そう、もちろんそのつもりなんですが、これは技術的な話しではなく、デザインする時の意識の問題なんです。

なので、これから言うデザインスピードを上げる方法は、あくまで「技術や方法論」として聞いていただいて「その短縮して余った時間」を、是非「デザインクオリティを上げる為の時間」や、後述する「相乗効果を狙える有効活用方法」に使って欲しいのです！

［景品表示法に基づく表記］ 本コンテンツにはプロモーションが含まれています。

デザイン経験を積むこと？

おーい、いやいや、待て待てw
いきなり、時間のかかる事言うなよ！

いやそうなんです。ある意味そうなんですが、まぁ落ち着いて理由を聞いてください。

良いデザインを作る時って(よほどの天才で無い限りは)デザインバリエーションパターンの試行錯誤を出来るだけ早く繰り返すんです。

「Aを試してだめならBを試す！それでダメならCでどうだ？といった具合に。」

その際、ある程度デザイン経験を積んだ人は、その試行錯誤をしなくても、それまでの経験でいくつかのパターンは、試さなくても「ダメか、良いか」がわかるんです。

つまり試さなくてもいい分、時間が短縮されるという寸法なのです。

デザイン経験を積むという事は、経験した事で「頭のなかだけでイメージができるスキル」といえます。

クライアント(ディレクター)へのヒアリングをキッチリやる

これが一番の時間短縮なのではないだろうか。デザインスピードというよりは作業スピードというべきだろうか。

それ俺の仕事じゃねーんだけど

という（ヒアリングはディレクターがやって、デザインだけに専念している）人も多いかもしれませんが、その場合はディレクターに「ちゃんと聞いてこいよ」と尻を叩いて下さい。

例え、それが先輩や上司でも言わないとダメなのが仕事なのです。

聞く内容としては「デザインの方向性」「ターゲット」「ゴール」「内容の相違」「素材の有無」「レギュレーション」などなど。

これをおろそかにすると、二度手間、三度手間！！経験者なら痛いほど、わかりますよね？

またクライアントにはモンスタークライアントという恐ろしい妖怪もいるので、その対策も必要です！

ヒアリングに使えるヒアリングシートも無料でダウンロードできるようになっている次の記事も、合わせて読んでみてください。

モンスタークライアント対策でWEB制作を効率化

ツールのショートカットを使い倒す

これ、わかっててもやらない人多いんです。でも本当に早くなります！

ショートカットを覚えるの面倒なんだよなぁ。

その気持ちわかるー！以前の私はそうでした。でも積極的につかい初めて結構スピードがあがりました。塵も積もれば山となるという事です！

でもやればわかります！地味にめちゃくちゃ効率あがります！photoshopの場合、既存のショートカットだけでなく、自前でショートカットを登録できるので、よく使う動作は是非登録しよう！

Photoshopの使うべき（登録すべき）おススメのショートカット

  • スマートオブジェクト化 (要登録）
  • オブジェクトの上下左右の反転（要登録）
  • レイヤーの複製（cmd + J)
  • トーンカーブ、色相彩度などの補正系 (cmd + M、cmd + U など)
  • 拡大縮小（cmd + T)

さらにもっと詳しく、Photoshopの爆速ショートカットについて書いた記事がこちらだ！

Photoshop爆速ショートカット集！

photoshopの機能を使いこなす

これも知ってるのと知らないのとでは、雲泥の差くらいに効率があがります。そういう意味では、古いphotoshopではなく、新しいphotoshop CCをちゃんと使うというのもひとつの方法と言えます。

Photoshopの機能について書いたこちらの記事もあわせて参考にしてみて下さい。

進化したPhotoshopでWEBデザイン効率アップの１０の奥義！

WEB制作が便利になる！Photoshop CC 2018の新機能

クライアントの言うことを鵜呑みにしない！

クライアントはあくまで素人、クライアントが「こうしてほしい」という具体的な要望がある場合、全部そのまま実行するのではなく、なぜそうしてほしいか？というクライアントの意図を知る事が大事です。

わかりやすい例で言えば「このボタンを赤にして」ほしい！と言われた場合、（そのまま赤にするとどキツイデザインになる場合は）単純に赤にするのではなく、目立たせてほしいというクライアントの要望を汲み取って（できれば確認しよう）余白をあけたり、適度に大きくしたり別の施策を試してみよう。

言われたとおりやらないとへそを曲げるクライアントの場合は、赤のパターンも作って、さらにデザイナーが良いと思うパターンも作って「こういうパターンも作ってみました！」という風に提案する形にすると良いだろう！

クライアントの言う通りにして、なかなか良いデザインにならずに、時間がかかる場合は、ぜひ試してほしい！

よく使うデザインパーツを作り置きしておく。

よく使うデザインパーツとは「矢印や」「別ウインドウアイコン」「メールアイコン」「SNSアイコン」など細かい部分は全部毎回唯一無二のオリジナルである必要はない！

これはらいくつかの種類とバリエーションを作って保管しておくと、毎回作る必要がなくなるので、時間の短縮につながります！

デザインに行き詰まったら、デザインを捨てる勇気

デザインをし続けているとたまに遭遇するのが、どうやってもいい感じのデザインにならない事がある。そんな時は今のデザインに固執せず、いったんそのデザインを捨てよう！

いや逆に時間かかんだろ！？

と思うかもしれないが、一度作った内容の場合はテキスト類やパーツはそのまま使えるので、意外に時間がかかりません。

逆にうまくいかないデザインをコネくり回す方が、かえって時間がかかるものです。

また、デザインに行き詰まったら、時間を空けるというのもひとつです。コン詰めてやると全然進まなくなる事があると思うのですが、思い切って休憩したり、書類整理や別の案件をやるなど、切り替えるといい事も多いです！

WEBデザインのスピードを上げる方法のまとめと「時間の有効活用方法」

まず何より当たり前ですが、経験が必要ですが、それ以上にデザインがうまくなりたいという「情熱」があればスピードは自然に上がるという事です。また、もっと重要な事は、冒頭で述べたように、スピードアップだけに囚われていたら、最も重要なデザインクオリティーがおろそかになってしまうという点です！

短縮できる部分はテクニックや知識で時間短縮をして、その余った時間を「クオリティの追求」や、さらに「プログラミングなどの新たな技術の取得」に使いましょう！

WEBデザイナーがプログラミングを学ぶ事は、実はかなりのメリットがあるんです！！その内容は次の記事を参考にしてもらえるととてもわかり易いかと思います。

WEBデザイナーが「プログラミングを学ぶ」7つのメリット

このようにWEBデザインのスピードアップで得た時間を、プログラミングなどの自分の技術アップに使う事は、実は「デザインとは違う脳」を使うという意味でも、相乗効果として良いという事なのです！！

※当記事の掲載内容は執筆現在の個人の見解・調査によるもので、動作・サービス等を保証するものではありません。最新情報は各公式サイトでご確認頂き、購入・契約・データ作成等はご自身の判断・責任でお願いします。 免責事項

関連記事

WEBデザイン動画講座
YouTubeで学ぶWEBデザイン Uチャンネル Powerd by STAND4U
超短期1日集中 オンラインWEBデザインマンツーマン講座

ナビゲーション

この記事を書いた人

編集長

WEBデザイン・グラフィックデザイン歴：約18年、HTMLコーディング、jquery、wordpress、イラストなど本業とし、WEBデザインコンサル・プログラミング・ライティング等にも勤しんでいます

プロフィールはこちら

WEBデザイン作品集はこちら

Twitter @stand_4u_ をフォロー

新着記事