エンジニアがWebデザインを学ぶときに参考にしたいスライド12選

最終更新日:2020年9月2日

「Webデザインを学びたいけど、何から始めていいかわからない…」「しっかり基礎を固めてWebデザインを学びたい」、そんなエンジニアのために、Webデザインを学ぶ際に参考になるSlideShareのスライドを12個まとめました。

各スライドともにWebデザイン初心者やノンデザイナーでも理解しやすい内容です。
Webデザインを効率良く学ぶために、Webデザインの基礎と原則を身につけておきましょう。

支援実績10年の登録者データを基にした エンジニア・クリエイター専門 年収診断 無料診断START

※2023年1月~2024年3月実績

コーディングを考慮したWebデザインガイドライン

コーディングを考慮したWebデザインガイドライン from Hiroyuki Makishita
 

デザインとコーディングと別々の担当者が行うことを想定し、コーディング担当者が作業しやすいデザインをするためのガイドラインをまとめたスライドです。
作業環境はPhotoshop CC 2014を想定しています。
 
誰が見てもわかりやすいデザインをするための、「Webデザインの作法」「デザインルール」をわかりやすくまとめてあります。

Webデザインのセオリーを学ぼう

Webデザインのセオリーを学ぼう from Toshiaki Sasaki
 

デザインをする上で注意すべきデザインセオリーをまとめたスライドです。
「デザインの4つの基本原則(近接、整列、反復、コントラスト)」「情報設計」「視線の流れ」「黄金比、白銀比」「色」「フォント」といったデザインの基礎が学べます。

色彩センスのいらない配色講座

色彩センスのいらない配色講座 from Mariko Yamaguchi
 

感覚で配色をするのではなく、ロジックに基づいた配色がわかるスライドです。
配色の基本が非常にわかりやすくまとめてあるので、デザイン初心者は必見。
「配色センスがないから、ちゃんとデザインができるか不安…」という方におすすめです。
クライアントに配色に関する説明を求められたときの参考にもなるでしょう。

ノンデザイナーのための配色理論

ノンデザイナーのための配色理論 from tsukasa obara
 

同じく配色理論についてまとめたスライドで、「色選びに失敗してしまう理由」を解説した上で、ノンデザイナーでも使える配色法を教えてくれます。
ノンデザイナー向けの配色法はスライドの後半で解説しています。

デザインに自信がつく、タイポグラフィの基本

デザインに自信がつく、タイポグラフィの基本 from Takuya Nishitani
 

タイポグラフィは、印刷のために文字の体裁を整える技法のことで、簡単にいえば文字を美しく見せるためのテクニックです。
普段何気なくWebサイトや印刷物で見ている文字も、実はタイポグラフィに基づいて調整されているものが多いです。
Webデザインを学ぶなら、タイポグラフィの基本を押さえておきましょう。

ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう

ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう from Sasaki Kouhei
 

「伝わるデザイン」の基本的な考え方をまとめたスライドです。
「書体の選び方」「良いロゴの見方」「色の選び方」「写真素材の選び方」について簡潔にまとめていて、ノンデザイナー、デザイン初心者でも理解しやすい内容になっています。

Aさんが言うデザインとBさんの言うデザイン、結局どっちが正しいの?

Aさんが言うデザインとBさんの言うデザイン、結局どっちが正しいの? from Ryoji Fujishita
 

デザインは、派手でカラフルなものと、スマートでシンプルなものに二分できます。
これはどちらが正しいというものではなく、コンテンツの特性に合わせて使い分けが必要です。
コンテンツ特性を理解して適切なデザインアプローチをすることの重要性が学べるスライドです。

レスポンシブWebデザイン基礎

レスポンシブWebデザインの基礎 from Hiroyuki Ogawa


レスポンシブWebデザインは、ひとつのHTMLファイルに対し、PC、スマートフォン、タブレットなどの各端末に応じて表示を切り替える手法です。
本スライドはタイトル通り、レスポンシブ・ウェブデザインの基礎をまとめています。
レスポンシブWebデザインのメリット・デメリットの説明から、具体的な実装方法まで教えてくれます。

流行に乗っていいの?フラットデザインの落とし穴

流行に乗っていいの?フラットデザインの落とし穴 from Yuudai Tachibana


フラットデザインは立体感を排除した平面的なデザインコンセプトで、iOSをはじめ、さまざまなデバイスで採用されているデザイン手法です。
シンプルで見やすい反面、装飾が少ない分、ユーザーがボタンをボタンと認識しにくいといった欠点があります。
本スライドは、フラットデザインを採用する上でどのような点に注意すればいいのか、簡潔にまとめてあります。

マテリアルデザインを用いたデザインリニューアル [フリル編]

マテリアルデザインを用いたデザインリニューアル [フリル編] from YUKI YAMAGUCHI


マテリアルデザインはGoogleが2014年に発表した新しいデザインコンセプトで、Androidスマートフォンに使用されています。
本スライドは、フリマアプリ「フリル」をマテリアルデザインでリニューアルした際の一連の流れをまとめてあります。

大規模サイトにおける本当は怖いCSSの話

大規模サイトにおける本当は怖いCSSの話 from 誠 井上


CSSはエラーを吐かないためトラブルに気づきにくく、大規模サイトになると複雑化して容易に修正できなくなってしまいがちです。
そうしたトラブルを避けるために学んでおきたいCSS設計の基本が解説されています。

デザインのためのデザイン

デザインのためのデザイン from Masayuki Uetani
 

株式会社nanapi※のCCO / デザイナーの上谷 真之氏が作成したスライドで、開発チームを主語にした組織デザインをテーマにしています。
実際にnanapiで取り組んでいる組織デザインを例に解説をしているためわかりやすく、チーム開発をするエンジニアがデザインに関わる際の参考になるでしょう。
 
※株式会社nanapi、株式会社ビットセラー、株株式会社スケールアウトの3社は、2015年11月1日を効力発生日として合併し「Supership株式会社」となっています。

最後に

今回紹介したスライドはいずれも非常によくまとまっていて、ノンデザイナーにとってもデザイン経験者にとっても役立つ内容です。
デザインセンスに自信がなくても、デザインの基礎と理論を学べば、それなりに見られるデザインは充分に作れますし、デザイナーとのコミュニケーションも捗ります。
「自分にはセンスがないから無理」と諦めず、基本をしっかり理解しましょう。

ITエンジニア・Webクリエイターの転職ならレバテックキャリア

レバテックキャリアはIT・Web業界のエンジニア・クリエイターを専門とする転職エージェントです。最新の技術情報や業界動向に精通したキャリアアドバイザーが、年収・技術志向・今後のキャリアパス・ワークライフバランスなど、一人ひとりの希望に寄り添いながら転職活動をサポートします。一般公開されていない大手企業や優良企業の非公開求人も多数保有していますので、まずは一度カウンセリングにお越しください。

転職支援サービスに申し込む

また、「初めての転職で、何から始めていいかわからない」「まだ転職するかどうか迷っている」など、転職活動に何らかの不安を抱えている方には、無料の個別相談会も実施しています。キャリアアドバイザーが一対一で、これからのあなたのキャリアを一緒に考えます。お気軽にご相談ください。

「個別相談会」に申し込む

この記事の監修

レバテックキャリア編集部

レバテックキャリアは、IT/Web業界のエンジニア・クリエイター向けに特化した転職エージェントです。当メディアでは、エンジニア・クリエイターの転職に役立つノウハウから、日々のスキルアップや業務に活かせる情報まで、幅広いコンテンツを発信しています。

プロのアドバイザーがあなたのお悩みや疑問にお答えします

- 転職個別相談会開催中 -

相談内容を選択してください

※転職活動や求人への応募を強制することはありません

関連する記事

人気の求人特集

内定率が高い

CSSの求人・転職一覧

ITエンジニア未経験~3年目の方限定

  • ITエンジニア適職診断
  • 5年後の予想年収

簡単3分無料で診断してみる

×

今もらっている年収は高い?低い?

簡単60秒 エンジニア・クリエイター専門 年収診断 無料診断START ×

年収アップをご希望の方へ

簡単!年収診断

現在の市場価値や
年収UPの実現方法がわかる!

現在の職種はどちらですか?