【Webデザインの方法解説】わたしのWebページのつくり方。

わたしのWebデザイン方法を紹介します！

前々から、

「Webデザインをするときってどういう手順でやってる？」

「Webデザインの方法がわからない！」

等々、相談を受けることがあるので、いつもWebデザインをするときの流れをご紹介します。

 

目次

1. どのようなページを作るか考える
2. 参考にするデザインを決める
3. ページを作る
4. よく使うツール

 

１．どのようなページを作るか決める

例えば、企業様から希望のデザインの提案があった場合等は別になりますが、1から自分でデザインを組む時の場合を想定して今回は説明します。

１－１．素材を見る

まず重要なのは素材です。

• ロゴ
• タイトル
• 文章
• 画像
• その他コンテンツ

を基にどのようなサイトを作るかを考えます。

１－２．具体例

CASE.1

例えば、アニメのサイトを作る際は、必ずメインビジュアルがあると思います。

全てのキャラの集合イラストだったり、主人公が大きく映っているイラストだったり..

この場合、

• トップにメインビジュアルを映し出すデザイン
• メインビジュアルを邪魔しないナビゲーション

という感じで雰囲気が少しずつ決まっていきます。

また、作品によって、

• 配色（作品の世界観に合った色）
• フォント（作品の世界観に合ったフォント）
• 表記/命名（英語/日本語）
• 形状（角を丸くするか等）

等の部分も雰囲気でわかるかと思います。

表記/命名の部分は分かり易く説明すると、「プロフィール」とカタカナで書くか「Profile」と英語で書くかという点です。

青春日常系の作品が英字ばかりではなんだか違和感がありますね。一方で西洋の世界観であれば英字の筆記体フォント等を使うのもありですね。

そんな感じで作品の世界観に合わせてサイトの世界観も練っていきましょう。

 

CASE.2

通販系のサイトや、用語紹介のサイト等、項目数の多いサイトはタイルデザインやカードグリッド、F型、Z型などの多数の項目を美しく見せることのできるサイトデザインになると思います。

• 画像だけを見せるのであれば、タイルデザインやカードグリッド
• 文章も必要であればF型やZ型

という感じでいいかと思います。

また、項目数が多いと、カテゴリや検索ボックスを常に表示するために固定バーが必要になると思います。

この固定する位置に関してもコンテンツの邪魔にならないように配慮しないといけないため、デザインによって位置を考える必要があります。

「F型で横長にコンテンツを展開する場合は横に長く使えるように、上にバーを固定する」みたいな感じです。

 

２．参考にするサイトを探す

参考にするサイトを探したいと思います。

企業サイトを作るのであれば、企業サイトを。

通販サイトを作るのであれば、通販サイトを。

と、同種のサイトを見て雰囲気を掴むのも大事ですが、オシャレなデザインがまとめてあるサイトを参考にしてみるのも手かと思います。

そこでお勧めするのがWebDesignClipです。このサイトでは、Webデザインの優れたサイトがたくさん集まっています。

似たデザインコンセプトのサイトを沢山見つけて、参考にしてみるのがお勧めです！

 

３．ページを作る

私の場合、PC版のデザインが一番イメージをしやすいため、PC版から作ります。

パーツの作る順番としては、

1. メインビジュアル（indexページの開いてすぐのとこ）
2. ナビゲーション
3. indexページの他のコンテンツ
4. フッター
5. 他のページ

といった感じです。

メインビジュアルがサイトの顔になるため、そこを最初に作るのがデザインを掴みやすいと思います。

そのあと、indexページ全体を作ることでサイト全体の雰囲気を決定して、他のページのデザインはindexページに合わせて作っていく…といった感じです。

続いて、スマホ版を作ります。

プレビューはGoogleChromeのデベロッパーツール（F12押すと出るやつ）を使用しています。

基本的にiPhone6/7/8のプレビューで見て、最後に全機種で試します。

ただ、一度実機でも確認することをお勧めします。OSやブラウザで勝手が全く違うので要注意です！

 

４．よく使うコンテンツ

デザイン時によく使うコンテンツをご紹介します。

 

４－１．ICOOON MONO

まずはページ内でアイコンに困ったら「ICOOON MONO」です。

このサイトは、

• 種類豊富なアイコン画像が無料でDLできる
• 保存形式はPNG / JPG / SVGから選択可能
• サイズや色をダウンロード時に変更可能

という、本当にありがたいサイトです。めっちゃオススメします！

 

４－２．uiGradients

グラデーションに困ったら「uiGradients」です。

このサイトは、

• 豊富なグラデーションを閲覧可能
• グラデーションはCSSコードでコピー可能
• 色でカテゴリ分けされている

といった感じです。最近はグラデーションを使ったUIも多くみられるため、グラデーションを使う際にはぜひ使って見てください！

 

４－３．PhotoshopVIP

デザイン技術で困ったら「PhotoshopVIP」です。

このサイトは、

• Photoshopの使い方を紹介
• Webデザインのスニペットを紹介
• その他Webデザインに関する情報多数あり

といった感じでWebデザイナー必読のサイトです。

隙間時間に読むのも面白いかと思います！

 

最後に

主な流れはこんな感じです。

基本的にカンプ等を作らない人なので、参考になる人とならない人がいるかと思いますが、使用しているツールや参考サイトだけでも役に立てば…と思います。

何か相談等ありましたら、Twitter宛に遠慮なく送ってください！

⇒筆者Twitter

 

今回のブログ曲

今回投稿中に聴いていた曲はこちら