こんにちは! HIDEです(^^)

時間が過ぎるのは早いものでセブへ来てもう4か月半が経過しました。
最初の1か月はパソコンが苦手過ぎて、できなさ過ぎて
どうやってセブから逃亡してやろうかと(笑) そんなことを考えていた私ですが
必死こいて頑張った結果、なんと一人でサイトを構築するまでに急成長!

やればできる子なんだ俺は!!と自分に言い聞かせる毎日でございます( ˘ω˘ )w

そんな感じで
講義の中で自分のサイトを一から構築し始めたところです。

ではどうやってサイトを作っていくのか?
今回はデザインを作るところまでの工程をご紹介します。

まずはサイトの内容や構造を予め練っておく。

 

ただなんとなーく作り始めるのではなく、先に内容と
どうしたら訪問者が増え、一人でも多くの人が自分のサイトを購読してもらえるのかを考えながら
作成に入ることが重要です。

自分はこんな感じでリストを作って作成に入りました。

 

■サイトの目的
■ターゲット
■キャッチフレーズ・キーワード
■タイトル
■サイトカラー・フォント
■サイトの中身(コンテンツ・内容・ページ)
■サイトの強み
etc…

あとから内容を付足したり、多少変わるかもしれませんが
ターゲットやサイトの目的はぶれないように心がけました。

試しに例として書いてみました。

 

■サイトの目的
自分のお気に入りの温泉を紹介したい。

■ターゲット
20~30代の独身男性。休日を充実させたい、何か新しい趣味を見つけたいと考えている人。一人旅が好きな人。

■キャッチフレーズ・キーワード
若い独身男性へ是非行ってもらいたい温泉の紹介

■タイトル
20代独身貴族の俺が全国の温泉地を紹介するサイト

■サイトカラー・フォント
ベースカラー #d26658
メインカラー #000000
アクセントカラー #3f21f5

温泉ということで落ち着いた淡いブラウンをベースに
シンプルかつ大人っぽさも演出したいのでメインは黒
アクセントは若い方の目を引くようにさわやかなブルーで
フォントは若い方が読みやすいようヒラギノをメインで使用していく予定

■サイトの中身(コンテンツ・内容・ページ)
おススメ温泉スポット俺的ランキング
地域別の温泉地紹介
温泉地での食事
ブログページ
お土産紹介

■サイトの強み
独身男性が一人旅としても行きやすい温泉地を紹介
自分が実際に行ったことのある温泉地での様子や、温泉以外の情報もリアルに紹介
写真が趣味なのでより「多くの情報を写真を通して紹介することができる点も他のサイトにはない強み一つ。

ざっくりと、こんな感じです。
この他には自分が参考にしたいサイトや、同じようなテーマのライバルになりそうな競合サイトなんかも見つけるといいですね(^^)
 

ワイヤーフレームを作成する

 

ワイヤーフレームとは

簡単に言うと設計図のようなもので、どこにどんなコンテンツを作って配置するかなどを決める全体のレイアウトを定めるものです。
実際、IT企業でウェブ制作に携わるような仕事をするならこのワイヤーフレームはとても重要みたいです。

例えば、ワイヤーフレームなしでデザインを作ってそれを提案したとして
クライアントがそれを気に入らなかった場合、デザインをまたいじって作り直さなければいけません。
ただ、このワイヤーフレームがあれば全体像が確実に決まった状態でデザインを作れるのでそのような二度手間が省けるということですね。
ワイヤーフレーム自体は全体のレイアウトに過ぎないので、そこまで一から事細かく作る必要もなく
また、実際のデザインをする際に「やっぱりここ変えよう」と思えば変更してしまっても問題ありません。

非常に簡単ではありますがサンプルを作ってみました。

実際には色も白黒で構いません。今回はあえて見やすくするために
わざと色付きで作ってみました。

これはもちろん手書きで作っても大丈夫です。
(極端に絵と字が下手くそな私にこの選択肢はありませんがww)

 

レスポンシブwebデザインとは

ここでもう一つ重要なのがこのレスポンシブデザインです。
これが何かというと、仕事でPCを使う人はPCでウェブを見たり検索したりするのが普通かもしれませんが、そうではない人はスマホを使ってネットを利用する人がほとんどだと思います。
もしくはPCを買う代わりにタブレットを使用している人も少なくないと思います。
そこで、PCの大画面で見るとすごく見やすいサイトが比較的小さめの画面のスマホで同じサイトを見たときに、レイアウトがめちゃくちゃになってしまている、ということでは意味がありません。

そのため、PC画面で見たときは画面の横幅いっぱいに、狭いスマホ画面で見たときにはきれいな縦並びに
といった感じで、使う端末に合わせてページのレイアウトを柔軟に調整することを指します。
端末によってサイズがかなり異なりますし、年々新しいタイプの端末がどんどん増えてきているのでこのレスポンシブデザインはかなり重要と言えます。

モバイルファースト

最近では「モバイルファースト」と言われるくらいこの考えが重要視されています。
あくまでもスマホ用のモバイルサイトから先に作りましょうという意味ではなく、webサイトをスマートフォンで閲覧した際にもきれいで見やすくストレスのないサイトを作りましょうという意味で
スマホを使用してインターネットを利用する人が増え続け、そちらがより重点的に考えられているということがよくわかります。

 

   

    PCで表示           スマホで表示

 

デザインカンプを作成する

 

ワイヤーフレームをうまく仕上げレイアウトが決まったところで、メインのデザインに入ります。
ワイヤーフレームはあくまでも全体像、設計図を表したものなのでこれを元に
実際に使いたい画像を埋め込んだり、実際に書き込む文章を書いたり
そうすることで最終的に仕上がったデザイン案、言ってしまえば完成図を作ることになります。
そうして出来上がったものがデザインカンプと呼ばれています。

実際に講義で作ったデザインカンプがこちらです。

講義の中ではPhotoshopというソフトを使ってワイヤーフレーム、デザインカンプを作成しています。

サイトに使う画像を埋め込み、文章もサンプルではなくサイトに表示させたい文章を書くことで
ワイヤーフレームと比べてみてもだいぶ仕上がりの完成形がイメージできます。

まだサイトの構築を自分で一からやったことのない人は
デザインも100%全て自分で考えるのは相当困難だと思うので
自分の好きなサイトや、かっこいいと思ったサイトを参考にしながら案を練っていくとよいです。

 

~デザインを作成する際の注意点~

 

フォントサイトカラー選び・・・ターゲットの性別や年齢層に合わせ、見やすいものを選ぶ。
・デザインの基本4原則を意識・・・関連する情報をグループ化(近接
                                                          要素を整列させ統一感を出す(整列
                                                          同じ要素を繰り返し使う(反復
                                                          異なる要素ははっきりと区別する(コントラスト
・配色に注意・・・色味(色相)、色の明るさ(明度)、色の鮮やかさ(彩度

 

これらに注意しながらデザインを行うことが、購読者を増やせる一つの近道になります。

例えば、シニア世代をターゲットにした上品で少し敷居の高いイメージのお店のサイトなら、落ち着いた色味と読みやすい書体を使用した方が間違いなくターゲット層の方々には見やすいサイトと言えますし
学生さんなど10~20代をターゲットにしたお店なら少しごちゃごちゃしたようなデザインの方が注目を集めることができます。

絶対的に万人受けする、100%正解のデザインはないですが、客層に合わせたデザインを作ることは非常に大切なことです。

こんな感じで一からデザインを作ることができました。
世界で一つだけの自分だけのオリジナルサイトを作れるのは自分だけです!!!

セブ島のIT留学でwebデザイナーの仲間入りを目指しましょう!

IT留学に関するお問い合わせ
自分だけのオリジナルサイトをデザインしてみよう

この記事が気に入ったら
いいね!をお願いします(^^)