プロが教えるホームページの作り方 その1

プロが教えるホームページの作り方その1


この記事の所要時間: 319

ホームぺージを作る上でまず最初になにからするのか?
どんな知識やツールが必要なのか?
どんな流れで作っていくのか?
そんな内容をできるだけわかりやすく、何度かに分けてご紹介していこうと思います。
これは、基本的に「作り方」であって、内容の決め方や目的の設定方法はここでは触れません。

ホームページを作りたい!まず初めはなにをする?

弊社のホームぺージ作成はいきなりデザインや、サンプルの見た目を作成したりしません。
まず初めは「何のホームページなのか?」ということと、
「最低限必要なページはどんなページなのか?」というところを決めるところから始まります。

最低限必要なページを洗い出す

例えば一般的な会社のサイトを作る場合。
サービスや商品、事業内容など、何を行っている会社なのか?のページが必要ですね。
それ以外に、会社の情報ページ、住所や電話番号など、
合わせて、企業理念や会社の思いなどのページも必要かもしれません。
そしてお問い合わせ。
最後に忘れてはいけないのは、サイトマップ、サイトポリシー、場合により個人情報保護についてのページなど
ここまでページの原案が出てきたら、それをまとめます。

まずはページ一覧をまとめてみる

  1. 事業内容
  2. 会社情報
    • 会社案内
    • 企業理念
  3. お問い合わせ
  4. サイトマップ
  5. サイトポリシー
  6. 個人情報保護について

となりますね。

これを基にエクセルを使ってディレクトリマップを作っていきます。
このディレクトリマップは、ページ数の見える化だけでなく、階層、ページ名、フォルダ名なども記載していき、ホームページを作る上で、この先ホームぺージ作成にかかわる人たちの共通認識を持ってもらうためにもなる、設計図のようなものと考えてください。

実は前述した纏めには一つ足りない部分があります。
わかりますか?
そうです、トップページです。いわゆる「ホーム」というページがありません。
トップページ(ホーム)は必ず1ページとして換算する必要があります。
お忘れなきよう。

では、ここで、私が普段から使っているディレクトリマップをご紹介します。
といってもとても簡単なものですw
よろしければこちらからダウンロードしてお使いください。

参考ディレクトリマップ
参考ディレクトリマップ(エクセルファイル)

意外に面倒?ディレクトリ名(フォルダ名)/ファイル名の決め方について

さて、ここまで来たら、次はフォルダ名やディレクトリ名の決め方です。
ルールとしては、
半角英語表記です。(例外ももちろんあります。)
私の場合英語堪能ではありませんので、google翻訳で翻訳して、英語名を付けたりします。
今回は「会社情報」を翻訳してみると、
「About us」
と翻訳されましたので、それで進めたいと思います。

翻訳以外に、基本的なよくある名前については、例えば「会社概要」ですとか、英語名を知りたいときにはその言葉をそのまま検索します。
google 会社概要検索結果
1位(※2018年9月6日時点)に出てきている「トヨタ | 会社概要 – トヨタ自動車」のURLを見てください。
「outline」となっていますね。
2位のNECでは「corp.html」3位「profile」4位「outline」5位「outline」・・・
これを見ると「outline」が良さそうです。
よほどのこだわりがある場合は別として、他の会社も多く使っている英訳を使うことが無難ですね。

このように、名前を付けるときは、翻訳かその言葉自体を検索して、他の会社を参考にしてみてください。
これが決まれば先ほどのエクセルに記入していきます。

ディレクトリマップ ファイル名記入

これでとりあえず設計図が完成です。

次回へ続きます、次回はこれをワイヤーフレームというものに落とし込む作業です。
お楽しみに!