コーディングを考慮したWebデザインガイドライン
デザインとコーディングと別々の担当者が行うことを想定し、コーディング担当者が作業しやすいデザインをするためのガイドラインをまとめたスライドです。
作業環境はPhotoshop CC 2014を想定しています。
誰が見てもわかりやすいデザインをするための、「Webデザインの作法」「デザインルール」をわかりやすくまとめてあります。
Webデザインのセオリーを学ぼう
デザインをする上で注意すべきデザインセオリーをまとめたスライドです。
「デザインの4つの基本原則（近接、整列、反復、コントラスト）」「情報設計」「視線の流れ」「黄金比、白銀比」「色」「フォント」といったデザインの基礎が学べます。
色彩センスのいらない配色講座
感覚で配色をするのではなく、ロジックに基づいた配色がわかるスライドです。
配色の基本が非常にわかりやすくまとめてあるので、デザイン初心者は必見。
「配色センスがないから、ちゃんとデザインができるか不安…」という方におすすめです。
クライアントに配色に関する説明を求められたときの参考にもなるでしょう。
ノンデザイナーのための配色理論
同じく配色理論についてまとめたスライドで、「色選びに失敗してしまう理由」を解説した上で、ノンデザイナーでも使える配色法を教えてくれます。
ノンデザイナー向けの配色法はスライドの後半で解説しています。
デザインに自信がつく、タイポグラフィの基本
タイポグラフィは、印刷のために文字の体裁を整える技法のことで、簡単にいえば文字を美しく見せるためのテクニックです。
普段何気なくWebサイトや印刷物で見ている文字も、実はタイポグラフィに基づいて調整されているものが多いです。
Webデザインを学ぶなら、タイポグラフィの基本を押さえておきましょう。
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
「伝わるデザイン」の基本的な考え方をまとめたスライドです。
「書体の選び方」「良いロゴの見方」「色の選び方」「写真素材の選び方」について簡潔にまとめていて、ノンデザイナー、デザイン初心者でも理解しやすい内容になっています。
Aさんが言うデザインとBさんの言うデザイン、結局どっちが正しいの？
デザインは、派手でカラフルなものと、スマートでシンプルなものに二分できます。
これはどちらが正しいというものではなく、コンテンツの特性に合わせて使い分けが必要です。
コンテンツ特性を理解して適切なデザインアプローチをすることの重要性が学べるスライドです。
レスポンシブWebデザイン基礎
レスポンシブWebデザインは、ひとつのHTMLファイルに対し、PC、スマートフォン、タブレットなどの各端末に応じて表示を切り替える手法です。
本スライドはタイトル通り、レスポンシブ・ウェブデザインの基礎をまとめています。
レスポンシブWebデザインのメリット・デメリットの説明から、具体的な実装方法まで教えてくれます。
流行に乗っていいの？フラットデザインの落とし穴
フラットデザインは立体感を排除した平面的なデザインコンセプトで、iOSをはじめ、さまざまなデバイスで採用されているデザイン手法です。
シンプルで見やすい反面、装飾が少ない分、ユーザーがボタンをボタンと認識しにくいといった欠点があります。
本スライドは、フラットデザインを採用する上でどのような点に注意すればいいのか、簡潔にまとめてあります。
マテリアルデザインを用いたデザインリニューアル [フリル編]
マテリアルデザインはGoogleが2014年に発表した新しいデザインコンセプトで、Androidスマートフォンに使用されています。
本スライドは、フリマアプリ「フリル」をマテリアルデザインでリニューアルした際の一連の流れをまとめてあります。
大規模サイトにおける本当は怖いCSSの話
CSSはエラーを吐かないためトラブルに気づきにくく、大規模サイトになると複雑化して容易に修正できなくなってしまいがちです。
そうしたトラブルを避けるために学んでおきたいCSS設計の基本が解説されています。
デザインのためのデザイン
株式会社nanapi※のCCO / デザイナーの上谷 真之氏が作成したスライドで、開発チームを主語にした組織デザインをテーマにしています。
実際にnanapiで取り組んでいる組織デザインを例に解説をしているためわかりやすく、チーム開発をするエンジニアがデザインに関わる際の参考になるでしょう。
※株式会社nanapi、株式会社ビットセラー、株株式会社スケールアウトの3社は、2015年11月1日を効力発生日として合併し「Supership株式会社」となっています。
最後に
今回紹介したスライドはいずれも非常によくまとまっていて、ノンデザイナーにとってもデザイン経験者にとっても役立つ内容です。
デザインセンスに自信がなくても、デザインの基礎と理論を学べば、それなりに見られるデザインは充分に作れますし、デザイナーとのコミュニケーションも捗ります。
「自分にはセンスがないから無理」と諦めず、基本をしっかり理解しましょう。
ITエンジニア・Webクリエイターの転職ならレバテックキャリア
レバテックキャリアはIT・Web業界のエンジニア・クリエイターを専門とする転職エージェントです。最新の技術情報や業界動向に精通したキャリアアドバイザーが、年収・技術志向・今後のキャリアパス・ワークライフバランスなど、一人ひとりの希望に寄り添いながら転職活動をサポートします。一般公開されていない大手企業や優良企業の非公開求人も多数保有していますので、まずは一度カウンセリングにお越しください。
転職支援サービスに申し込む
また、「初めての転職で、何から始めていいかわからない」「まだ転職するかどうか迷っている」など、転職活動に何らかの不安を抱えている方には、無料の個別相談会も実施しています。キャリアアドバイザーが一対一で、これからのあなたのキャリアを一緒に考えます。お気軽にご相談ください。
「個別相談会」に申し込む
