2017年6月26日

デザイン

【デザイン】ホームページの作り方:手順と必要な知識その1

目次

  1. はじめに
  2. ホームページ作りの手順
  3. 企画
  4. 企画その1:ホームページの目的
  5. 企画その2:ホームページのコンセプト
  6. 企画その3:ホームページのターゲット
  7. 企画その4:スケジュール感
  8. 設計
  9. サイトの設計その1:サイトの構成
  10. サイトの設計その2:ワイヤーフレーム
  11. まとめ

はじめに

ようこそ、Webの世界へ。
本記事では「ホームページをちょっと自分で作ってみたい!だけど、そもそも何から勉強すればいいかわからない、どうやって作ればいいのかわからない。」という方に向けてホームページの作り方の手順と知っておきたい情報を楽しくご紹介します。

ホームページ作りの手順

まずは、ホームページを作るときのざっくりとした流れをご紹介します。

ステップ

  1. 1企画
    ホームページの目的、コンセプト、ターゲットなどを明確に決める
  2. 2設計
    必要なページ数、コンテンツ(ページに入れる内容)、ホームページの構成などを決める
  3. 3デザイン
    ホームページの色合い、装飾、部品のデザインなどを決める
  4. 4コーディング
    デザインに沿ってホームページを組み立てる

企画

まずは、ホームページの企画をしっかりと立てます。
特に重要なのは以下3つです:

  • 目的
  • コンセプト
  • ターゲット

企画その1:ホームページの目的


何のためにホームページを作るのかを考えます。
このステップでのポイントとしては、数字で測れるものを目標に設定することです。

NG例:自分は車が好きだから、車愛好家が車をみれるサイトが作りたい

一見理にかなっているように見えますし、自分の好きなものをサイトにするという発想もとても良いです。
しかし、これでは目標が曖昧です。
どれくらい見て欲しいのか、どんなシーンで活用して欲しいのか、何人に来て欲しいのかわかりません。
こういう目標が曖昧なサイトは、残念なことに作った後はそのまま放置され、忘れ去られることが多いです。

良い例:自分のとった車の写真を多くの人に見てもらいたいから、車愛好家が週に100人くるサイトにしたい。また、一人のユーザー(サイト訪問者)が少なくとも1ページは見るサイトにしたい

このようにはっきりとした目標設定であれば、実際に自分の作ったホームページが成功したのかしていないのか、測定することができます。

目標を達成していれば、達成した嬉しさと共に、もっとホームページを大きくしよう!という気持ちにもなるかもしれません。
逆に達成していなければ、自分のホームページのどこを改善するべきなのか施策を練ったりすることもできます。

POINT!!

最初のうちは、ホームページの目標を立てることよりも、「作る」というところに焦点を当てがちですが、
せっかく作るのですから、10人に見てもらうお問い合わせを1つ獲得する

企画その2:ホームページのコンセプト


ホームページの魅力を最大限に生かすためには、コンセプトが大切です。
他のホームページにはない、自分のページの独自のコンセプトを決めておくことで、
今後の制作に置ける様々な決め事の指針になります。
例えば同じ車のサイトでもコンセプトが違うと全く別のサイトになります。

コンセプトA: 車の美しさを間近で見るような臨場感を持ってアピールしたい
写真などを大きく使い、ユーザーの目に訴えかけるようなサイトに仕上げる
コンセプトB: 車の新着情報をとにかくたくさん伝えたい
読みやすい文字を意識し、毎日新しい記事が増えていることを実感できるサイトにする
コンセプトC: いろんな車をわかりやすく比較できるようにしたい
比較する項目、対象などがわかりやすくし、文字と写真のバランスを保ちつつ違いなどのポイントをすぐに把握できるサイトにする

このようにコンセプトを決めることによって、ホームページの何を強調すべきか、何に気をつければ良いかなどが明確になってきます。

企画その3:ホームページのターゲット


ホームページのターゲットとは、誰にこのホームページを見て欲しいのか、ということです。
ターゲットをどう決めるかというと、「属性」というもので区切ります。
「ターゲットの属性」というと難しく聞こえますが、例えば、性別、年齢、場所、職業などが属性にあたります。

では、先ほどの車のサイトのターゲットはどんなものがふさわしいでしょう。

例: ターゲットは「20代の男性」

年齢も絞れていますし、車といえば男性なのでなかなか良いターゲット設定に見えます。
しかし、実際には落とし穴があります。

20代前半の男性は、まだ大学生。逆に20代後半の男性であれば、社会人で会社の中堅的役割を担っているかもしれません。

そう考えると「20代の男性」では、ターゲットを絞っているように見えて、実は全く行動や思考が違う2つのターゲットを追っているのです。
こういった数字の落とし穴に気をつけながら、ターゲットを決めましょう。

企画その4:スケジュール感


企画の段階で決めておいた方が良いことは他にもあります。
特に、ホームページを作るスケジュール感やサイトにいれたい内容などは決めておくと後々便利です。
1人でホームページを作っているとスケジュールを決めずに「隙間時間でやればいいや」と思いがちですが、
そうすると途中でめんどくさくなって諦めてしまうことも多いです。

初心者の方であれば、「2ヶ月以内に終わらせる!」という目標で作ってみてください。

POINT!!

企画に1週間、設計に1週間、デザインに3週間、コーディングに3週間、とある程度の細かい粒度でスケジュールを組んで、モチベーションを保ちましょう。

設計

企画が終わると、次はホームページの設計に入ります。

設計の際には決める内容は以下です:

  • サイトの構成
  • ワイヤーフレーム

サイトの設計その1:サイトの構成


サイトの構成は、「サイトマップ」と呼ばれ、必要なページ数やページの重要度、どのようにそのページにたどり着けるか、などを決めます。

作成の仕方は自由です。
パワーポイントなどで視覚的に作るもよし、エクセルなどでページの名前などを洗い出しもよしです。

サイトマップの作り方に決まりはありませんが、何もないところから作るとき、何から始めれば良いのか迷うこともありますので、おすすめの方法をご紹介します。

ステップ

  1. 1競合や似たようなサイト(少なくとも3つ、できれば10個ほど)を見つけ、その中に入っている内容(コンテンツ)を並べてみる
  2. 2自分のサイトに必要なものと必要でないものを分け、さらに追加したい独自のコンテンツを追加する
  3. 3似たコンテンツや関連したコンテンツをグルーピングする
  4. 4トップページに入れるコンテンツ、そのほかのページに入れるコンテンツを振り分ける
  5. 5ページ数が多い場合(5,6ページ以上)は重要度を1(超重要)、2(まぁまぁ重要)、3(補足)に分ける 
  6. 6ページの階層を考える → どのようにページを「フォルダ分けするか」

サイトの設計その2:ワイヤーフレーム


サイト全体の構成が決まったら、次は各ページごとの設計図(ワイヤーフレーム)を作成します。

もう少し細かくいうと、ページのどこに何を置くのかを決める作業です。

ワイヤーフレームは手書きで作成しても大丈夫ですし、慣れている方はSketchIllustratorPhotoshopCacooなどのソフトやツールを使用して作っても大丈夫です。

参考にするものが欲しい方は wireframe showcaseをみたり、 dribbbleなどで「wireframe」と検索してみてください。

まとめ

ホームページを作る、というとHTML, CSSなどの技術的なコーディングを思い浮かべる方が多いかと思いますが、こういった企画や設計をきちんと決めないといくら技術が足りていても、良いサイトが作れません。 まずは、どういうサイトが作りたいのか、をしっかりと決めていきましょう。

デザインのお仕事に関するご相談

Bageleeの運営会社、palanではデザインに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。

無料相談フォームへ

3

0

AUTHOR

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

CONTACT PAGE TOP