かっこいいWebデザインの作り方を解説!参考サイトと学習方法つき

こんにちは!侍エンジニア塾ブログ編集部のはやかわです。

本日は誰でもできるかっこいいWebデザインの作り方を解説していきます。

この記事をご覧になっているあなたは、


Webデザインってどうやって作るの?
どこに気をつければ初心者でもかっこよく作れるの?

などと気になっていませんか?せっかくなら僕が、私が作ったんだよ!ってみんなに自慢できるようなかっこいいデザインを作りたいですよね。

そこでこの記事では、Webデザインを作るのに必要なスキルとその手順、ここにこだわると見やすくかっこいいWebサイトが作れるポイントなどを解説していきます。

それではどうぞ!

Webデザインに必要なスキルと作り方、基礎編


引用:shutterstock https://www.shutterstock.com/

Webデザインを作るには、下記の順番で進めていきます。

  • 情報設計
  • 画面設計(ラフデザイン)
  • デザイン
  • 実装

その際に必要なスキルはデザインとコーディングで2つに分かれています。

  • デザイン:Photoshopやillustrator
  • コーディング:HTMLやCSS、JavaScript

PhotoshopやHTMLってなに?という方はこちらの記事で具体的にどんなスキルなのか解説しているので、見てみてください。

それでは、詳しいデザインの作り方の説明に参ります!

Webデザインの作り方1:情報設計

まずはWebサイトに掲載する情報を整理します。

例えば、弊社「侍エンジニア塾」のWebサイトの場合、下記の9ページに分割されて作られていますよね。

  • 1.トップページ
  • 2.侍エンジニア塾の特徴
  • 3.講師紹介
  • 4.受講生の声
  • 5.料金・コース
  • 6.Q&A
  • 7.お問い合わせ
  • 8.法人向け
  • 9.無料体験レッスンを予約

そして、それぞれのページにどんな情報を載せたいのかをざっくり考えておきましょう。

例えば、侍エンジニア塾の特徴ページだったら、「これまでの実績・仕事獲得の3つの壁・挫折させない4つの特徴」などが挙げられます。

細かい文章までは決めないでいいので、だいたいどんな要素を入れておいきたいかくらいまでは決めておきましょう。

Webデザインの作り方2:画面設計(ラフデザイン)

情報をまとめたら、次は簡易的なラフデザインを元に画面のどこに何をレイアウトするのかを決めていきましょう。

手書き→ツールにする場合、手書きだけ、最初からツールなど経験やそのプロジェクトの規模感によって変わりますが、個人が最初の1つめのサイトの場合は手書きだけで十分です。

実際のラフデザインはこんな感じで、画面のどこに何を置きたいのかを、最初にまとめた情報を元に作っていきましょう。


引用:KENスクール https://www.kenschool.jp/blog/?p=3649

Webデザインの作り方3:デザイン

ラフデザインが出来上がったらそれを元にデザインツールソフトを使ってデザインをおこしていきましょう。

ラフをデザインに起こしたのちに、サイトにあった画像や文字を当てはめていきます。

ここで、デザインツールの使い方を知っている人と知らない人で差がつくため、Photoshopやillustratorの使い方を学んでおきましょう。

PHOTOSHOP VIPというサイトでデザインソフトの使い方を学ぶことができます。

Webデザインの作り方4:実装

デザインが出来上がったらHTMLやCSSなどのマークアップ言語を用いて、コーディングしていきます。

最近はレスポンシブデザインであることが前提なので、スマートフォンで見たときとパソコンで見たときで表示崩れがないかなどにも注意しながら進めていきましょう。

Webデザインをかっこよく作るこだわりポイント

ここまででWebデザインを起こして、実際にサイトまで落とし込む手順はわかったかと思います。

それではここから一歩進んだかっこよくするためのテクニックを解説していきます。

フォント


引用:IPPUKU&MATCHA https://ippukuandmatcha.jp/

こちらのサイトは「抹茶」のジャンルに対して、明朝系のフォントを使うことで、高級感と和風さを引き出しています。

このように作りたいものとフォントの組み合わせをこだわることで、サイトの雰囲気をぐっと持ち上げることができます。

色の組み合わせ・使い方


引用:STAN SMITH(スタンスミス) https://shop.adidas.jp/originals/stansmith/

こちらのサイトはベースカラーは黒におきつつ、赤・黄色・オレンジなど商品のラインナップと共に鮮やかな色を重ねることで、商品の魅力が引き出されるデザインとなっています。

ヘッダーカラーと共に商品詳細へのボタンが黒色で統一されていることで、統一感と背景の色に対して目立つようになっています。

写真・ビジュアル


引用:藍の鰆 | 福岡県北九州市 藍の海から http://ainosawara.com/index.html

こちらのサイトのファーストビューは、漁師の方の迫力溢れる写真が特徴的で、仕事に取り組む臨場感や真剣さが表情に出ている素晴らしい写真が使われています。

「珠玉の味わいの鰆」を表現するのにふさわしいワンショットにとてもこだわっている良い例ですね。

余白・行間


引用:茶方會 - SABOE https://www.saboe.jp/

こちらは余白や間を大胆にとった例で、フォントサイズは少し小さめに設定している代わりに行間広めで、お茶が醸し出すゆったりとした時間や余裕のある雰囲気を感じさせます。

お茶を五感で楽しむためにも、雑念や余計なことを考えない茶道の情景が浮かび上がりますね。

かっこいいWebデザインを作る参考サイト

WebDesignClip


様々なジャンルで美しいWebサイトを集めたギャラリーサイトです。

クリエイティビティのあるサイトから、設計の美しいサイトまで多様な美しさがあり、何かしら参考になるポイントが必ず見つけられます。

WebDesignFile


引用:WebDesignFile http://www.webdesignfile.com/

こちらは海外サイトのデザイン集になるため、スタイリッシュで洗練されたデザインの多いギャラリーサイトです。

大胆なデザインのファーストビューを使ったサイトが多いため、クリエイティブ性の高い参考事例を探している人におすすめです。

1.I/O 3000

スクリーンショット 2016-06-15 11.00.38

引用:I/O 3000 http://io3000.com/

国内、海外どちらも含めて、WEBデザインの参考になるサイトが揃えられています。
サイト自体もオシャレで見やすく、スムーズに使えて使い心地は抜群です。

MUUUUU.ORG

スクリーンショット 2016-06-15 11.08.14

引用:MUUUUU.ORG http://muuuuu.org/

カテゴリがデザイン別、色別などと豊富で、検索がしやすい仕様になっています。

数あるWEBサイトの中でも、クオリティの高いものが厳選されて紹介されています。

81-web.com


引用:81-web.com https://81-web.com/

こちらのサイトは、綺麗でデザイン性が高いことはもちろん、SNSでのシェア数も記載されているため、どのサイトがどれくらい反響があったのかを測れるサイトです。

スタンダードなサイトから、デザイン性の高いサイトまで豊富に用意されています。

初心者がWebデザインの作り方を学べる学習ロードマップ

初心者の方は下記のステップでまずは1つのサイトを作ってみましょう。

  • デザインの概要、ツールの基礎勉強(2週間)
  • HTMLやCSSなどのコーディング勉強(2週間)
  • 書籍で体系的に学びつつ、1つのサイトを作ってみる(4週間)

デザインの概要やデザインツールの基礎はSKILL HUBというWeb制作のプロを養成するオンライン学習サイトや、Adobeラーニングでツールのチュートリアルが載っているので、参考にしながら進めてみましょう。

コーディングスキルは、Progateでスライドを見ながら、HTMLやCSSを学習し、ドットインストールで動画をみながらサイト制作の流れと共に学んでいくのがおすすめです。

ここまでできたら次はオリジナルのサイト制作を行なって、まずは1つのポートフォリオとなるサイト制作を目指して頑張りましょう!

Webデザインの基礎や学習方法についてはこちらの記事で詳しく解説しているので、見てみてください。

最短でWebデザイナーになるならスクール学習がおすすめ

Webデザインの作り方から学習方法まで解説してきましたが、最短でWebデザイナーになるならスクールでの学習がおすすめです。

スクールだと経験者に教わることができるため習得スピードが圧倒的に早く、提携している企業に紹介してくれたりと、卒業後のキャリアまでスムーズに進めるため、独学よりも圧倒的に早く着実にスキルアップすることができます。

侍エンジニア塾では、

  • あなたのキャリアの理想に近い講師によるマンツーマンレッスン
  • キャリアに合わせたフルオーダーメイドカリキュラム
  • オリジナルサイト、サービス制作も可能!ポートフォリオにできる

という3つの完全個別型の指導で、ただのWebデザイン学習ではなく、あなたの人生を切り拓くWebデザイン学習指導を心がけています。

ポートフォリオを6つ作り卒業後すぐに内定を獲得した方や、受講期間中に案件獲得しレッスン中にその案件を講師と一緒にやって副業デビューした方など、様々な実績がございます。

無料体験レッスンでは、あなたの理想の生活から逆算しておすすめなキャリアパスや身につけるべきスキル、その学習手順をあなたの生活や性格を加味して提案させていただきます。

ウェブ上で情報収集しているだけでは気づけないオーダーメイドレッスンの一部を体験できる有意義な機会となりますので、是非下記のカレンダーよりお気軽にお申し込みください。オンラインでも受講可能なので、全国各地より受けていただけます。

LINEで送る
Pocket

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

書いた人

早川弘晃

早川弘晃

侍エンジニア塾ブログのマーケティングやライティングを担当しています。制作会社にてフロントエンドエンジニアをやっていた経験を生かして、現場で使える質の高い情報提供をモットーに、日々思考錯誤しながら過ごしています!

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習やキャリアのお悩み、お気軽にご相談ください。