Webデザインを勉強する時に参考にしたいまとめサイト・記事25選
Webデザインやホームページ作成を勉強したい人向けに、参考になるまとめサイト・記事・小技テクニックを集めてみました。「Webデザインの見本サイト」や「今すぐ使えるテクニック」など、初心者がすぐに参考になるサイトばかりです。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
Webデザインをこれから勉強しようと思っても、どこから始めていいかわからないということはないでしょうか？
そこで、今回はWebデザイン（ホームページ）を勉強する時に参考にしたいまとめサイト・記事を集めてみました。今後のWebデザインの勉強方法の参考になるはずです。
Web制作初心者の方への指南から、サイトのコーディング、美しいデザインなど、Webサイトのデザインを考える上でとても参考になるものばかりです。Webデザイナーを目指して、独学で勉強したい方は参考にしてみてください。
なお、今回紹介する内容は、TechAcademyのWebデザインスクールでも学べます。
目次
Webデザインのスライド資料
Web上にはSlideShareで共有されているWebデザインに関する資料が数多くあります。そんなスライド資料を中心にまとめた記事です。
1. Web制作のおすすめスライド デザイン編
Webデザイン全般に役立つSlideShareのスライドを紹介している記事です。
かなり数が多いので、休みのタイミングで一気に読んでみるのも良いかもしれません。初めてWeb制作に取り組む人やどういう流れでWeb制作に取り掛かれば良いかよく分からない人は必見のスライド資料ですね。
ディレクターやプロデューサーはまず最初に知っておきたい内容でしょう。
2. ひとりでWeb制作できた！「知識０から学ぶ」すごいスライドやサイト２７
HTML/CSSからPhotoshopやIllustratorまで、これさえあれば本当にひとりでWeb制作ができてしまうかもというくらい丁寧にまとめられています。
Webデザイン初心者の方はまずはチェックしてみてください。
必要な言語やツールの全体像がわかるはずです。
3. もうCSS設計で悩まない！「CSSコーディング ガイドライン」策定のための参考記事・スライド 7選
CSSはWebサイトのデザインで必要不可欠なものです。
コーディングをしていく際にある程度の決まりごとを作っておかないと、あとになって自分自身やWeb制作チームのメンバーの中で齟齬がうまれてしまいます。この記事を参考に、CSSコーディングのガイドラインを制定してみてはいかがでしょうか。
複数人で開発するチームは全員で共有しておきたい内容ですね。
4. Webデザインのセオリーを学ぼう
Webデザインのそもそもを勉強する資料としては十分な内容です。
デザインとアートは全く違うという意見がありますが、デザインはどう考えるべきものなのか理解できるはずです。
5. AppleとGoogleのデザインガイドライン比較
今やスマホ対応のデザインが必須となっています。とはいえiPhoneとAndroidというようにデバイス毎にデザインが違うのも事実です。
それぞれどういった考えてデザインされているのか資料で見ていきましょう。フォントやボタンのサイズ、配色など細かい部分まで参考になるはずです。
今後はより一層モバイルからの閲覧比率が高まるはずです。ぜひチェックしておきましょう。
Webデザインの見本サイト
どんなデザインのWebサイトが他にあるのかを調べる時に使えるのが見本サイトです。
6. bookma! v3
Webサイトのデザインを決める上で参考にしたいギャラリーサイトです。
配色やテイスト、Webサイトのカテゴリーから検索することもできるので1日中見ていても飽きませんね。ファーストビューに大きな画像を表示しているサイトが多いですが、参考になるはずです。
7. 美しいWebデザインをタイプ別に！見ないと損する目的別厳選Web見本サイトのまとめ
Webデザインの参考になる見本サイトのまとめ記事です。
どのサイトにも一度は目を通して、必要になったときに参考として使ってみましょう。
8. 新人デザイナーならブクマして損なしのWebデザインギャラリーサイト
国内・海外問わずWebデザインギャラリーサイトをまとめた記事です。
このまとめを参考にすれば、これでもかというほど数多くのWebデザインを見ていくことができます。
9. WebDesignClip
クリエイティブ性の高いWebサイトを集めたギャラリーサイトです。
自分が気に入ったサイトを「MyClip」として保存することもできるので、Webサイトの作成に役立つはずです。洗練されたサイトも1000以上登録されているので、ぜひ参考にしてみてください。
また、自分のサイトを提出することも可能です。
10. WebDesignFile
上で紹介したWebDesignClipの姉妹サイトでこちらは海外のサイトのみを掲載しています。
より最新のトレンドを知りたいと思ったら海外の事例を参考にすると良いでしょう。英語のフォントを取り入れたサイト作成に役立つはずです。
自分のサイトをよりシンプルに、よりスタイリッシュに見せたいと思ったら参考になるサイトが多くあると思います。
11. Design Link Database
管理人さんがセレクトした優れたWebデザインを1日1～2つ紹介されるサイトです。個人で管理しているサイトにもかかわらず、twitterのフォロワーは4万人近くもいます。Webデザインに迷ったらここ、というサイトです。
12. イラストブックマーク
イラストが使用されたWebサイトを集めたギャラリーサイトです。
実際の人ではなくイラストやアイコンを使うことで、コミカルな印象を与えることができます。会社のコーポレートサイトや堅いビジネスを行っている企業はイラストを使うことで記憶に残るでしょう。
どのサイトも色が多くポップなサイトが多いのが特徴です。
13. I/O 3000
かなり個性的なWebサイトが多いギャラリーサイトです。
音楽やグルメ、旅行や教育、スポーツなどのカテゴリやタグ、そして色で絞り込むことができます。
イベントのキャンペーンサイトやコーポレートサイトの作成でも迷ってしまうくらい事例が多いので、良いインスピレーションが得られるはずです。
14. 81-web.com
採用ページ、商品紹介ページ、オフィシャルページが多く並んでいるギャラリーサイトです。
単純に見ているだけでもどんなWebデザインが流行っているのか何となく分かるはずです。トレンドを取り入れたいと思っている方はぜひ見ておきたいサイトでしょう。
Webデザインに使える小技・テクニック
実際にデザインをする際に参考になる小技、テクニックをまとめた記事です。
15. 次のレベルまでWEBサイトを引き上げてくれるCSS、javascriptテクニック集
Webサイトを制作する際に参考にしたいCSSとJavaScriptのテクニック集を集めた記事です。
iOS7の登場によりますます活気づいている「フラットデザイン」についてのテクニックも紹介されています。アプリのデザインやモバイルのデザインに関わる人には重要な内容です。
16. スマートフォンサイトのhtmlコーディングメモ12個
スマートフォン用のサイトのデザインを考えるときに参考にしたいまとめです。
htmlの段階でもできることはたくさんあるので、覚えておきましょう。Webデザイナーに限らず、コーダーやマークアップエンジニア、ディレクターに役立つメモになるでしょう。
とても細かい点ですが、ユーザーにとって使いやすいデザインを再現できるので、細部にもこだわりましょう。
17. ノンデザイナーこそ押さえておきたい！グッとくるWebサイト配色パターン集
大手企業などの既存サイトの配色を解説した記事です。
デザイナーに依頼するときにも知っておきたい内容がまとめられています。Webサイトやバナー、ボタン1つを取っても色のバランスはとても重要です。
ノンデザイナーこそ知っておきたい内容なので、必読の記事と言えるはずです。
18. ワンパターンなウェブデザインから抜け出すための10のヒント
同じ人物が作ったサイトは、同じようなデザインになりがちかも・・そんな悩みを持った人向けの記事です。
クリエイティビティを引き上げる10のヒントが紹介されています。
Webサイトに関わらず「新しい発想が欲しいな」と思ったら見ておきたい記事になります。ぜひいろんな引き出しを作っておきましょう。
19. ウェブデザイナーが見直しておきたい、2016年のウェブデザイントレンド10個まとめ
2016年のデザイントレンドをまとめています。サイト上にはどういったものを載せて、どういう色でなど2016年のトレンドが分かるはずです。
アニメーションや色、フォントなど様々なトレンドが分かります。今取り入れておきたい要素などもあるので、デザインに関わる人は要チェックでしょう。
20. CSSのみで実装するボタンデザインやホバーエフェクト20+α
最近は動きの出るWebサイトが増えてきました。この記事ではホバーエフェクトに焦点を当てて、デモとソースコードを紹介してくれています。
そのままコピペして自分用に使えるので、初心者の方でもすぐに動きを再現できるはずです。
実際に書きながらどんな変化があるのか確認してみてください。
21. Appleのヒューマンインターフェースガイドラインから学ぶ5つの優れたUIの秘密
AppleのUIデザインに関する記事を翻訳した記事になります。
普段からMacやiPhoneを使っている人は多いと思います。Apple製品はデザインが素晴らしいとよく言われていますが、どういったプロセスでデザインが出来上がっているのか必見です。
このブログ自体、Goodpatch（グッドパッチ）という日本を代表するUIデザインに特化したデザインカンパニーなので、勉強になる記事が多くあります。
最新のデザイン事情やデザイナーを目指している方は、ぜひともブックマークしておきたいサイトの1つでしょう。
22. Code My UI
海外のサイトですが、ちょっとしたテクニックを動きを確認しながら学べるサイトです。
ボタンを押したときの動きやマウスオーバーした時の動きなど、ユニークな実装が多く見ているだけでも楽しめます。ぜひ自分のサイトにも取り入れてみてください。
23. 意味のあるデザインを！自然なアニメーションの作り方
海外のアプリ、モバイルサイトを事例に優れたアニメーションの載せ方を紹介しています。
アニメーションは動きがあって、一瞬でかっこいいや美しいと思ってしまいがちですが、使うシーンがとても重要です。
ユーザーにとって使いやすいWebデザインを実現するためには必要不可欠な知識だと思うので、ぜひチェックしておきましょう。
現役デザイナーの知見をまとめた記事
現役デザイナーがデザインを行う上で実際に経験した体験や、学習方法を紹介した記事です。
24.観察とは何か？デザインにどう活きるのか？
Webデザインを行う際に、パソコンを操作しながらデザインを学習する事が多いと思います。
しかし、現役デザイナーによると、Webデザインの基礎も美術で学習するデザインの基礎も、基礎としては同じ学習をした方が良いと伺ったことがあります。
この記事では、デザインを学習する際に必要な観察眼についての解説を行っています。
デザインの基礎であるデッサンを行う場合、観察する必要があります。
しかし、観察して書くという当たり前の行動すぎて、観察する事がいかにデザインに重要かを見落としがちです。
この記事では、具体的にどのようなステップで観察していくかを客観的に再認識する事ができます。
25.デザイナーに必要なコミュニケーション能力とは何か
デザイナーはデザインすることが仕事です。
しかし、ただ、言われるがままにデザインをしていても、デザイナーとしての成長は難しいこともあると思います。
デザイナーとしてどのようにコミュニケーションをとるかで、結果的に、社内やお客様からの評価、そして、転職の際のポートフォリオへの影響に至るまで大きな影響を与えます。
今回の記事はいかがでしたか。
Webデザインをさらに勉強したい場合は、Webデザインスクールに通ってみるのもよいかもしれません。
また、現役エンジニアから学べる無料のプログラミング体験会もオンラインで実施しているので、ぜひ参加してみてください。
[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。Webデザインを基礎から身につけたいという方はぜひご覧ください！
現役のデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルのWebサイトを作ることが可能です。
| この記事を監修してくれた方
中本賢吾（なかもとけんご） 開発実績：PHPフレームワークを利用した会員制SNS・ネットショップ構築、AWSや専用サーバー下でLinuxを使用したセキュアな環境構築、人工知能を利用したシステム開発、店舗検索スマホアプリ開発など。 その他にも地域の職業プログラマー育成活動を行い、2018年には小学生がUnityで開発したオリジナルAndroidアプリをGooglePlayでリリース。ゲームで遊ぶより作ろうぜ！を合言葉に、小学生でも起業できる技術力を育成可能で有ることを証明し続けている。 |
