ブログやウェブサイトを作る際の進め方・カラーイメージ【前準備】
私が会社のウェブサイトやブログページを作るに当たって、実際にDreamweaverやWordPressで構築していく前に準備しておいた方が良かったなあ～と思うことがあったので、記載しておきたいと思います。
実際に構築する作業より、文章や写真素材を集める方がはるかに手間が掛かりました。中身の素材自体は、多くあって困るものではないので手分けして集めたり、概要文章を分担して作っておいた方が良いです。余った素材は、ブログ等にまた使えるようになります。
ウェブサイトを作るには、どんな準備が必要？
- サイトの設計図・・・どんなユーザーに見てもらうためのサイトなのか？企業情報をメインとして作る？製品・サービス情報を前面に出す？
- テーマやキャッチコピー・・・ 企業や製品・サービスをどんなユーザーに、またはどのように伝えたいのか？キーワードにもなるように。
- 具体的な説明・・・企業や製品・サービスの詳しい内容。 企業理念や企業情報、製品・サービスの良さを説明できるように。
- イラスト画像や写真・・・企業や製品・サービスが明確に分かるイラストイメージや写真。働いている雰囲気や人物が登場する方が、より信頼感が出る。
なんだ、これだけっ？って思うかもしれませんが、案外良いキャッチコピーや紹介文もすぐに出てこない。また、なかなかまとまらないものです。ベースになるものがあればいいですが、これから見てくれる人に届くような言葉も意識した方が良いです。キャッチコピーはプロの方に考えてもらうのも良いと思います。
ポイント
私は以前働いていた会社のウェブサイトリニューアルのディレクションをしました。サイトは企業の顔として、一応世界中から見ることができるものですので経営陣の方にも協力してもらって改めて理念や伝えたいことを宿題にして考えてもらいましたが、、、残念ながら自主的に考えれる
方はほぼいませんでした。社歴が遥かに短い私が、インタビューしたりして捻りだして文章構成はほとんど私の文章になってしまったほどです。
４つの項目は時間が掛かるので平行して手分けしながら進めるようにすればいいでしょう。良い文章ってすぐには出ない場合もあります。また、企業の場合は進めている途中できっと、上役の方が「あれ入れて、これ入れて」っと後から注文が入るのできっちりした構成は、中身がそろってからで十分です。。。
一番最初のサイト構成に必要な要素として重要な、カラーイメージをつけてみてはいかがでしょう。仮の写真とカラーイメージをつけるだけでウェブサイトのイメージがグッと前に進んでいく感じがします。
ウェブサイトのカラーイメージ設計
企業の場合はコーポレートカラーが決まっている場合が多いので、メインとなるカラーは考える必要はないかもしれません。但し、サブとして付け加えて使用する色や、グローバルナビゲーション（サイトのメニュー）にカーソルを合わせた時の色も想定した方がいいでしょう。さらには色の上にテキストを乗せた時の見え方も重要な要素です。
私はアパレルの仕事でAdobe社のillustratorというソフトを使用していましたので、それをベースにイメージを固めていきました。現在はAdobeクリエイティブクラウドというウェブ上から申し込んで、様々なソフトを使用できるサービスになっています。
illustratorで設計していくときもディスプレー上に映し出すものはRGBモードで確認して、良い色が
見つかったら赤枠部分のHTMLのカラーコードをメモでもしておくといいでしょう。
illustratorのようなデザインソフトを使わない方はこちらのサイトが便利です。
ウェブ上のカラー設計ツールを使うと便利です。
カラーチップの上でクリックするだけでカラーコードがコピーできます。クリックした時に出てくる６桁の英数字がHTMLテキスト（ブラウザで表現できるコード）で必要なコードになります。上の画面以外にもメニューから様々なカラーを選べるページが出てきますが、このページは縦軸に同一の色相で、横軸に彩度・明度を並べていますので、サイト設計段階ではとても参考にしやすいと思います。
このサイトでは配色メニューを使用すると目の前画面でダイレクトに配色確認ができ、色を探すメニューからはイメージの言葉から色を探すこともできるのでメチャクチャ便利です。
サイトで使用するカラーコードは、例えばサイトの一部をプロのイラストレーターさんに依頼したりする際には、ポイントとなる色として統一した方が良いので、メモしておいたりしたらいいでしょう。
スマホアプリも便利です。
サイトのイメージは掴めてきてますでしょうか？？
ご自分に合ったツールを駆使して思い通りのサイトになるように、
どんどんイメージを膨らませていきましょう！！！
では、読んでいただきありがとうございました。
※受講料を最大70％OFFでwebに関する勉強する方法
最近は沢山のプログラミングスクールやWordPressの本が出ていますが、webデザイン・webプログラミングやサービス開発を勉強したいならインターネット・アカデミーがおすすめ。ウェブ特化のカリキュラムが特徴で、様々なコースが充実しているので、自分に合ったスキルが必ず見つかると思います。
▶▶▶ まずは無料のカウンセリングを受けてみるならコチラ
文系でも分かるwordpressの設定はコチラ 続きを見る
PC苦手の文系でも分かるWordPressでサイトの作り方
