超初心者からのWordpressとブログ ブログの活用

ブログやウェブサイトを作る時の進め方・カラーイメージ【前準備】

ブログやウェブサイトを作る際の進め方・カラーイメージ【前準備】

 

私が会社のウェブサイトやブログページを作るに当たって、実際にDreamweaverや
WordPressで構築していく前に準備しておいた方が良かったなあ~と思うことがあったので、
記載しておきたいと思います。

実際に構築する作業より、文章や写真素材を集める方がはるかに手間が掛かりました。
中身の素材自体は、多くあって困るものではないので手分けして集めたり、概要文章を
分担して作っておいた方が良いです。余った素材は、ブログ等にまた使えるようになります。

 

ウェブサイトを作るには、どんな準備が必要?

 

  • サイトの設計図・・・どんなユーザーに見てもらうためのサイトなのか?企業情報を
    メインとして作る?製品・サービス情報を前面に出す?
  • テーマやキャッチコピー・・・ 企業や製品・サービスをどんなユーザーに、または
    どのように伝えたいのか?キーワードにもなるように。
  • 具体的な説明・・・企業や製品・サービスの詳しい内容。 企業理念や企業情報、
    製品・サービスの良さを説明できるように。
  • イラスト画像や写真・・・企業や製品・サービスが明確に分かるイラストイメージや写真。
    働いている雰囲気や人物が登場する方が、より信頼感が出る。

 

なんだ、これだけっ?って思うかもしれませんが、案外良いキャッチコピーや紹介文もすぐに
出てこない。また、なかなかまとまらないものです。ベースになるものがあればいいですが、
これから見てくれる人に届くような言葉も意識した方が良いです。キャッチコピーはプロの方に
考えてもらうのも良いと思います。

 

ポイント

私は以前働いていた会社のウェブサイトリニューアルのディレクションをしました。サイトは
企業の顔として、一応世界中から見ることができるものですので経営陣の方にも協力してもらって
改めて理念や伝えたいことを宿題にして考えてもらいましたが、、、残念ながら自主的に考えれる
方はほぼいませんでした。社歴が遥かに短い私が、インタビューしたりして捻りだして文章構成は
ほとんど私の文章になってしまったほどです。

 

4つの項目は時間が掛かるので平行して手分けしながら進めるようにすればいいでしょう。
良い文章ってすぐには出ない場合もあります。また、企業の場合は進めている途中できっと、
上役の方が「あれ入れて、これ入れて」っと後から注文が入るのできっちりした構成は、
中身がそろってからで十分です。。。

 

一番最初のサイト構成に必要な要素として重要な、カラーイメージをつけて
みてはいかがでしょう。仮の写真とカラーイメージをつけるだけでウェブサイト
のイメージがグッと前に進んでいく感じがします。

 

ウェブサイトのカラーイメージ設計

 

企業の場合はコーポレートカラーが決まっている場合が多いので、メインとなるカラーは考える
必要はないかもしれません。但し、サブとして付け加えて使用する色や、グローバルナビゲー
ション(サイトのメニュー)にカーソルを合わせた時の色も想定した方がいいでしょう。
さらには色の上にテキストを乗せた時の見え方も重要な要素です。

 

 

 

 

 

私はアパレルの仕事でAdobe社のillustratorというソフトを使用していましたので、それをベースに
イメージを固めていきました。現在はAdobeクリエイティブクラウドというウェブ上から申し込んで、
様々なソフトを使用できるサービスになっています。

 

 

illustratorで設計していくときもディスプレー上に映し出すものはRGBモードで確認して、良い色が
見つかったら赤枠部分のHTMLのカラーコードをメモでもしておくといいでしょう。

 

illustratorのようなデザインソフトを使わない方はこちらのサイトが便利です。

 

ウェブ上のカラー設計ツールを使うと便利です。

 

https://www.materialui.co/colors

 

カラーチップの上でクリックするだけでカラーコードがコピーできます。クリックした時に
出てくる6桁の英数字がHTMLテキスト(ブラウザで表現できるコード)で必要なコードに
なります。上の画面以外にもメニューから様々なカラーを選べるページが出てきますが、
このページは縦軸に同一の色相で、横軸に彩度・明度を並べていますので、サイト設計段階では
とても参考にしやすいと思います。

 

 

 

https://www.colordic.org/

 

このサイトでは配色メニューを使用すると目の前画面でダイレクトに配色確認ができ、
色を探すメニューからはイメージの言葉から色を探すこともできるのでメチャクチャ便利です。

 

サイトで使用するカラーコードは、
例えばサイトの一部をプロのイラストレーターさんに依頼したりする際には、ポイントとなる
色として統一した方が良いので、メモしておいたりしたらいいでしょう。

 

スマホアプリも便利です。

 

 

PANTONE Studio

PANTONE Studio
開発元:Pantone
無料
posted withアプリーチ

 

 

カラーガイド

カラーガイド
開発元:DIC Corporation
無料
posted withアプリーチ

 

 

サイトのイメージは掴めてきてますでしょうか??

 

ご自分に合ったツールを駆使して思い通りのサイトになるように、
どんどんイメージを膨らませていきましょう!!!

 

では、読んでいただきありがとうございました。

スポンサードリンク

スポンサードリンク

  • この記事を書いた人

ni-no

長年アパレル業界で働いて、スーツ工場勤務から生産管理やカットソー縫製工場の責任者をしてきました。少しでもファッションやアパレル業界のためになるように、トラブル対処の経験やノウハウをメインにまとめています。 ついでに仕事合間の趣味に関しても記事にしています。 ウェブサイト作成と運営 ウェブライティング アパレル製品企画 アパレルOEM生産 承っております。 お気軽にお問い合わせ下さい。

-超初心者からのWordpressとブログ, ブログの活用

Copyright© swingby-nino.com , 2020 All Rights Reserved.