2009-12-21

サイトのカラー設計

日記

webデザイナーさんはUI設計からサイトカラー設計、
コンテンツ設計などをこなしてデザインに落としこむと思うので、
そう難しいことではないと思うのですが、
ディレクター職となるとそこまで専門知識も無いし、
ましてやプログラマー上りとなるとなおさら。

今やっている業務でこの辺の設計をやることができたのでおさらい。

注）あくまで独自です

サイトカラーの設計手順

現状調査
キーワードを決める
色相を決める
明度を決める
配色を決める

現状調査

既存のサイト、もしくは参考サイト、競合サイトなどがある場合は調査する必要があると思いますが、
現状調査をするにあたりまずこのサイトでカラースキーマを抽出。
colr.org

URL、もしくはキャプチャ画像をアップすると、
そこからカラー情報を抽出してくれる。
いちいち目視で抽出しなくていいので楽。

で、こんな感じでまとめる。

キーワードを決める

以降に決める色相、明度、配色を決めるにあたり必要なキーワードを決定する。
サイトカラー設計に入るころにはすでにサイトの
「目的」「コンセプト」「目標」
が決まっていると思う。
という事は「ターゲット」も決まっている事になる。
今回はターゲットと目的から落とし込んだ。

ターゲット

IT業界ではない企業、web事業部担当者

目的

コンバージョンを増やしたい、企業の事業展開に合わせたサイト構成

上記2点から落とし込むと

他サイトと同等のUIが必要（webの常識を無視しない）、IT企業への問い合わせ目的での流入であるため、目的コンテンツは会社概要、実績、サービスあたりであると想定、サイトの目的は問い合わせであり、問い合わせまでの導線は明瞭である必要がある

という具合に仮説をたてて、そこからカラーキーワードの決定をした。
カラーキーワードはこの本を利用。

色相を決める

単純に上記のカラーキーワードにあう色を、やはり上記の本から抽出。

明度を決める

明度の決定には、問い合わせまでの導線を明瞭にするというところから、
無難に白ベースがいいと判断し、そこからアクションボタンに使える明度はどの程度か、
上記で決めた色相の各明暗色を確認して、使える範囲はどの辺りかを確認し決定。
明度も、予めきめておくことで、デザインする際にブレなくて済む。はず。

配色を決める

これはこじつけに近い気もするがｗｗｗ
上記で決定した色相、明度からと、サイトの目的、ターゲットに一番合うと思われる配色法を選択する。
配色は人のセンスで決まると思われがちだが、じつはちゃんと理論的な配色方法があり、
これに当てはまればそうそう、気持ちの悪い配色にはならない。はず。
理論的な配色については以下サイトが参考になる。

色見本と配色サイト - color-sample.com
http://colors.napcsweb.com/colorschemer/
http://www.sipec-square.net/~mt-home/students/miyazono/project/haishoku/page02.html

サイトに動きを見せたかった事、しかし、類似色を利用して、色の幅を持たせたかった事から、
今回採用したのはスプリットコンプメンタリー配色。

カラー設計終了

上記の手順でカラー設計が終了。
ベースカラーが約70%〜80%占め、
残りのカラーでそれぞれ配分していくとこんな感じになるかなーと想像しながら、
実際に色を組んでみて、違和感がなければOK。なのかなｗ

本当はwebデザイナーに頼めるまともな予算でやりたい

本当はこういったカラー設計はwebデザイナーさんに任せたい（丸投げではなく、主導を渡す）
けど、予算的に厳しい案件が多く、どうしても自分でやらないといけないことが多いのと、
何度かwebデザイナーさんにお願いしたことがあるが、
感覚的な仕事なため、うまく設計まで落とし込めていないケースや、
落とし込めているかもしれないが、伝わらないことが多く、
結局のところ自分でやるハメになったことが多々あるので、
なんとも言えないところ。

早く健全な予算が組めるような流れになってほしいなぁ。

2009-12-18

意外と走れることに気づいた

日記

いつもジムに行くと

ストレッチ
一通り筋トレ
軽くストレッチ
10Kmラン
ストレッチ

のコースで、時速9.6km〜10.6kmくらいの速度で走るのだが、
今日はジムについたのが21時40分くらいだったので、

ストレッチ
10Kmラン
ストレッチ

と、筋トレをせずに走り出したところ、
いつもより軽快に走れることに気づき、
序盤から時速10.5kmで走った。
ラスト2kmは11.2kmに速度をあげ、
タイムも今までで一番早く走れた。

筋トレは下半身もやるので、
その疲労が邪魔して走れないのはわかるが、
それにしても予想以上に影響があるんだなぁと気づいた。

と、同時に、1年6か月続けると早く、長く走れるようになるんだなぁと感じた。

ジムに通いだして走り出した当初は距離3Km、時速7.5kmで死にそうになってたのにｗｗｗ

いつかフルマラソンに出たい

2009-12-17

のぉーーーーーーーー

残念なことが起こった。
どのくらい残念かというと、
人が自主的に動こうとしているのに
上司が先回りして動きを抑えつけてしまい、
成長にブレーキをかけているにも関わらず、
「俺って社員思いでしかも仕事の効率化が図れる出来るやつ」
と勘違いしちゃってる人くらい残念だ（なんのことだｗｗｗ）

上の例はいいとして、
TwitterAPIを利用して企画を考えたので、
早速創りだそうとしていたのだが、
サービス内容、細かいディティール、仕様がほぼ一緒。
でもそこそこ使われているっぽい。

このまま作り続けられないな。
どうしようかな。

何かしらで差別化出来ればいいんだけどな。

とりあえず、寝て起きて考える事にするｗ

2009-12-16

画面設計の為にスケッチブック買った

日記

最近設計することが多く、ツールはホワイトボードとA4の紙なのだが、
（中規模以上になったらVisioとかが登場するｗ）
最終的な設計内容を清書するのがPCツールだと時間がかかるので、
スケッチブックに落とすことしようと思って。

他にも服のデザイン考えたりロゴデザイン考えたりと、
それこそスケッチブックとして使えるのでA3サイズで購入！！

ついで過ぎるが、この1年くらいジムで走り込んでいるので、
そろそろログを取りたいのでNIKE+を試したいのだけど、
シューズが専用シューズでないので、センサーを入れるホルダーも同時購入。
同時購入した理由は送料無料の為なんだけどもーｗｗｗｗｗ

2009-12-15

EC-CUBE2インストール

PHP EC-CUBE

担当プロジェクトでEC-CUBE2を使うことになったので、
先行して触っておこうと思い、開発環境構築がてらインストールしました。

前提条件

Apache2.2系インストール済み
MySQL5.1系インストール済み
PHP5.2系インストール済み

1、最新版のEC-CUBE2を確認

http://www.ec-cube.net/download/index.php

2、EC-CUBE2をサーバへダウンロード

wget http://downloads.ec-cube.net/src/eccube-2.3.4.tar.gz

3、展開

$ tar xvfz eccube-2.3.2.tar.gz

4、htmlファイルをドキュメントルートに設定

シンボリックリンクを貼る
（別に貼らなくてもOK）

5、EC-CUBE2用のDBユーザー作成

6、EC-CUBE2用のDB作成

5、6は右記URLが参考になりますhttp://wiki.ec-orange2.jp/index.php?インストール/環境構築-Linux/データベース/MySQL

7、EC-CUBE2セットアップ画面にアクセス

シンボリックリンクを設定していたら

http://hoge.com/install

シンボリックリンクを設定していなければ

http://hoge.com/html/install

次へ進むクリック

8、アクセス権限をチェックされる

次へ進むをクリック

9、色々コピーされる

次へ進むをクリック

10、EC-CUBE2で利用する基本情報を入力する

■ECサイトの設定
店名：お店の名前
管理者メールアドレス：管理者のメールアドレス
管理者ログインID：セットアップ終了後このIDでログインすることになります
管理者パスワード：上記IDのパスワード

■WEBサーバの設定
HTMLパス：展開したソースのhtmlフォルダまでのパスを入力
シンボリックリンクを設定している場合はシンボリックリンクまでのパス
シンボリックリンクを設定していない場合は展開したファイルの中のhtmlディレクトリまでのパス
URL（通常）：EC-CUBEにアクセスするURLを入力
URL（セキュア）：SSL設定などをする場合はhttpsのURLを入力
共通ドメイン：レンタルホスティングの場合、共通で使えるSSLがあるが、その場合ここで設定
（多分ｗｗｗ）