Arch tag:www.ar-ch.org,2010-01-06://2 2012-05-07T16:46:57Z Movable Type Pro 5.01 ブログをリニューアルしました tag:www.ar-ch.org,2012://2.192 2012-05-07T16:18:27Z 2012-05-07T16:46:57Z ブログのリニューアルについて arch UI面、デザイン面、コーディング面のそれぞれで、どのように変わったのか。
少しでも参考になればと思いましたので、まとめてみました。 ]]> リニューアルの理由は3つありまして、1つ目は、アクセス数の多い記事が固定化されてしまっていたので、それを流動化したいと思ったことです。
2つ目は、私自身がシンプルなデザインに物足りなくなってしまったので、もう少しにぎやかなデザインに変えたいと思ったことです。
3つ目は、XHTMLという少し古い言語を使用していたので、現在推奨されている最新のHTML5に変えたいと思ったことでした。

UI面

週間アクセスランキングの設置

特にフリー客向けの機能なのですが、新しく、かつ、よく読まれている記事を表示することで、ユーザーの興味をひきやすくなったのではと思います。
また、こちらのページにあるはてぶランキングとは違って、順位に変動が起きやすいので、定期的にサイトを訪れてくれるユーザーも増えるかなと考えています。

なお、このアクセスランキングは、AccessRankingGAというプラグインを使用させていただいております。ありがとうございます。

関連記事の設置

ユーザーが探している情報と関連した記事を提供することで、ユーザーにとって更なる情報獲得の機会につながったり、ヒントを得てもらいやすくなると思い、設置しました。

デザイン面

全体感

以前は白ベースでシンプルなデザインだったのですが、ちょっとさびしい感じもしたので、にぎやかさやごちゃっと感が出るようなデザインにしてみました。
ただ、うるさくならないよう、色は彩度の低いものをベースにしたり、色数を絞ったりしています。

フォント

デバイスフォントは、Windowsだとメイリオ、Macだとヒラギノゴシックをメインに使用しています。

画像フォントは、欧文はAvenir、和文はAxisです。
やわらかさとあたたかみを出すためにこれらのフォントを選択しました。

配色

落ち着いているけれどもピリッときいた配色にしたいなと思い、以下のような配色にしました。

ちなみにこの配色は、依然記事で紹介した鳥の色（ヒレンジャク）を参考にしています。

コーディング面

HTML5

今回はHTML5で構築をするにあたり、以下のテンプレートを使用させていただきました。ありがとうございます。

【HTML5】新規でサイトを作るのに使えそうなの一式。Ver 1

ほぼ初めてHTML5で組むという方は、テンプレートやサンプルを利用した方が理解が早くなって良いと思います。

CSS3と画像

今回は、画像管理の面とページ表示速度の面から、なるべく画像の数を減らしてCSS3でできることは極力CSS3で実現したいと思い、そのようにつくりました。
（特にページ表示速度は、スマートフォン対応を考えているので...）

ただIE6～8については、きちんと表示ができていません。今回のリニューアルより、IE6とIE7は表示対象外、IE8についてはCSS3に対応できるJavaScriptなどを順次入れていく予定です。

画像形式はPNG

今まで、前の会社の慣習もあってGIF画像を使っていたのですが、以下の記事を読んで、PNGをメインで使うことにしました。

WebサイトでPNGを使うのは非常識！？

ただ、その際、PNGの容量が気になったので、縮小ソフトを使用しています。
ソフトは、PngOptimizerです。

ちなみにスマホ対応はまだですので、これから対応をしていきたいと思います...。
また、アクセス解析などをみながら、適宜UIやデザインを変更していこうかなと思っております。
今後とも、Archをよろしくお願いいたします。

]]> 自然物からデザインのヒントを得るということ tag:www.ar-ch.org,2012://2.191 2012-04-25T23:41:49Z 2012-05-07T17:27:33Z 自然物からデザインのヒントを得るということ arch 常々、「どうしてこの配色や形状だと知的に見えたり、洗練されて見えたりするんだろう」と思っていたのですが、ひょっとして自然物の印象やイメージがそれに関係しているのでは、と思いました。 今回はこの辺を探ってみたいと思います。 尚、今回の記事はあくまでも自分の推論ですので、ご注意ください...。

人工物に対する印象やイメージは、自然物によって想起されている？

ツバメという鳥を例に考えていきます。

みなさんは、ツバメに対してどんなイメージがあるでしょうか？

barn swallow (ツバメ) #3050
photo By Nemo's great uncle

個人的なイメージですが、私はツバメに対して、「かっこ良い、知的な、優雅」な感じを受けます。

また、日本では、ツバメは害虫を食べる益鳥とされていますし、ツバメに対して悪いイメージを持っている方は少ないのではないでしょうか。

ツバメの色と形からの考察

ツバメの色

ツバメの体毛の色を抜き出してみました。

この配色は、金融機関など、知的なイメージのサイトで使われていることが多いのではないでしょうか。

ちなみに、他の鳥（春の鳥）の色はこんな感じです。

色だけ並べてみても、それぞれ特徴があっておもしろいですね。
（参考 : BIRD FAN）

ツバメの形

燕尾服というのがあります。
これは上位の裾が、燕の尾のように二つに割れていることからそのように名づけられたそうです。
ですが、私はそれだけでなく、その優雅で知的なさまがツバメと似ているからでは、と思っています。

以上から、このように成り立つのでは、と思います。

ツバメと似た配色や形＝ツバメのイメージ＝かっこ良い、スマート、優雅な感じ

とても安直かもしれませんが、少なからず、このように想起するというのはあると思います。
ですので、人工物に対する印象やイメージは、自然物によって想起されているのではないかと私は考えます。

また、自然物の印象やイメージは、その民族の文化や歴史、共通認識に左右されるのではないでしょうか。

以上です。
というかこれって、デザインを専門的に学んできた人たちにとっては当たり前のことだったりするのかな...。

※もし、こちらの記事に関して文献等ご存知の方がいましたら教えていただけますと幸いです。

]]> アイコンの役割や使い方をおさらいする tag:www.ar-ch.org,2012://2.190 2012-04-23T02:26:05Z 2012-05-07T17:29:41Z アイコンの役割や使い方をおさらいする arch なので、どうしてわかりづらいのか、とか、アイコンの意図が読めないとどうなるのかを考え、またアイコンって重要だなと再認識したので忘れないようにエントリです。]]> そもそも、アイコンの役割とは？

そもそものアイコンの役割とは、機能などを絵（グラフィック）におきかえて、わかりやすく示すことです。

ただ、絵というのは、意味の伝達が多義的になります。
それが大きな利点でもあるのですが、機能を示すために使うときは、意味が一義的になるようにする必要があります。

ユーザーを混乱させないようにする

ユーザーがアイコンから意味をうまく読み取れないとき、迷って時間がかかってしまったり、最悪使うこと自体をやめてしまうかもしれません。
そのような機会損失を防ぐために、アイコンの使い方を考えたり、意味の明瞭なアイコンを作成することが必要です。

※ユーザーに試行錯誤をさせて、使い方を覚えさせるというサイトもあると思うのですが、そうでなければ意味をいくつにもとれるアイコンは使うべきではないと思います。

これらを踏まえて、どのようにアイコンを選ぶのか。
私の場合は以下のようにアイコンを選びます。

  • 1. アイコンの種類の選択
  • 2. アイコンの配置方法・使い方を考える

1. アイコンの種類の選択

アイコンの種類には、以下の3つがあります。

  • (1) 行為そのものを示す
  • (2) 行為で使用するものを示す
  • (3) その行為や、行為で使用するものを象徴するもの、似たものを代替として示す

これらの中から、何を絵として示せばその機能だとわかるのかを念頭において、最適なアイコンを作成・選択します。

2. アイコンの配置方法・使い方を考える

アイコンの配置方法・使い方とは、大きく分けて以下3つではないでしょうか。

  • (1) アイコンを単独で使う
  • (2) アイコンに文字の説明をつける
  • (3) アイコンを使わず、文字のみにする

これらの配置方法・使い方は、アイコンの形状と機能、アイコン配置のスペースを考慮しながら検討する必要があります。

1. アイコンを単独で使う

Webで意味が浸透している形状と機能（初心者ユーザーでも理解できる）のものは単独で使うことができる。

2. アイコンに文字の説明をつける

アイコンから伝わる意味がいくつもあったり、曖昧なアイコンは文字とセットにする。

3. アイコンを使わず、言葉のみにする

機能が複雑で、アイコンとして表現しにくい場合や、アイコンで表現することによって逆にわかりづらくなる場合は文字のみにする。

以上です。 アイコンによってそのサイトの使いやすさが変わってくるので、アイコンの作成・選択は慎重にしなければなりませんね。

]]> ヴィジュアル要素の表現方法 tag:www.ar-ch.org,2012://2.189 2012-04-18T23:56:46Z 2012-05-07T17:31:13Z ヴィジュアル要素の表現方法について arch メインビジュアルなどをつくるとき、うまく思いつかず困ってるんだよねーって方の参考になるかな、と思います。]]> ヴィジュアルの表現方法としては、大きく分けて以下の2種類があります。

■直接的な表現
人・物・動物・タイポグラフィなどそのものを主役に置いた表現。

■間接的な表現
抽象的なメッセージを主役に置いた表現。「たとえ」や「見立て」の技法を使う。

今回は、間接的な表現の中でどんなものがあるか、修辞技法をもとにまとめてみました。
言葉だけ聞くと難しく感じるのですが、普段私たちが話し言葉でも良く使っているものですので、理解しやすいと思います。

比喩

直喩法

直喩（明喩、シミリー）とは「（まるで・あたかも）～のようだ（ごとし、みたいだ）」のように、比喩であることを読者に対し明示している比喩である。
「修辞技法」（2011年12月6日 (火) 05:32）『ウィキペディア日本語版』。
http://ja.wikipedia.org/wiki/%E4%BF%AE%E8%BE%9E%E6%8A%80%E6%B3%95


New Balance Japan

二人の男女が宙に浮いていることから、「空を飛べるような軽さ」であることを表現しています。

隠喩法

隠喩（暗喩、メタファー）に分けられるものは、比喩であることが明示されていない比喩である。
「修辞技法」（2011年12月6日 (火) 05:32）『ウィキペディア日本語版』。
http://ja.wikipedia.org/wiki/%E4%BF%AE%E8%BE%9E%E6%8A%80%E6%B3%95


福祉用具のレンタル・販売、住宅改修　株式会社ヤサカ

「つながり」を、家族の手を重ねているさまや、家族の絆から表現しています。

換喩法

換喩（かんゆ、メトニミー）とは表現する事柄をそれと関係の深い付属物などで代用して表現する比喩である。また「永田町」と言って国会を、「葵の御紋」と言って徳川家を指すのも換喩の一種とされ、『象徴喩』と訳されている。
「修辞技法」（2011年12月6日 (火) 05:32）『ウィキペディア日本語版』。
http://ja.wikipedia.org/wiki/%E4%BF%AE%E8%BE%9E%E6%8A%80%E6%B3%95

桜咲く、というのを合格として表現しています。（画像は管理人作成）

諷喩法

諷喩（ふうゆ、英: Parable）とは、寓意に使われるようなたとえのみを提示することで，本当の意味を間接的に推察させる比喩を言う。
「修辞技法」（2011年12月6日 (火) 05:32）『ウィキペディア日本語版』。
http://ja.wikipedia.org/wiki/%E4%BF%AE%E8%BE%9E%E6%8A%80%E6%B3%95

忙しいというのを、「猫の手を借りる」と、それによって助けることを表現しています。（画像は管理人作成）

擬人法

比喩の中でも特に、人でないものを人格化し、人に例える手法を擬人法（ぎじんほう、活喩）という。その場合、読み手に対し、例えられる「人でないもの」に対する親近感を抱かせる効果が生まれる。
「修辞技法」（2011年12月6日 (火) 05:32）『ウィキペディア日本語版』。
http://ja.wikipedia.org/wiki/%E4%BF%AE%E8%BE%9E%E6%8A%80%E6%B3%95


太陽光発電ならソーラーフロンティア｜太陽光発電商品のご紹介

ソーラーパネルを、女優の井川遥さん、猫を外国の男の子で表現しています。これによって、パネルと猫が自分たちに近いものと感じ、親しみを感じられやすくなります。

擬物表現

擬人法と逆に、人の動作や様子を物質に喩える手法があり、これを『擬物表現』、『結晶法』、『実体化』（原義はHypostatization《英》）などと訳している。
「修辞技法」（2011年12月6日 (火) 05:32）『ウィキペディア日本語版』。
http://ja.wikipedia.org/wiki/%E4%BF%AE%E8%BE%9E%E6%8A%80%E6%B3%95


カゴメ株式会社＞野菜一日これ一本

AKB48のメンバーを野菜に見立ててます。AKB48メンバーの個性と野菜の個性が重なって、親近感がわきます。

対照法

同じ立場、条件において全く逆の表現を使う手法。
「修辞技法」（2011年12月6日 (火) 05:32）『ウィキペディア日本語版』。
http://ja.wikipedia.org/wiki/%E4%BF%AE%E8%BE%9E%E6%8A%80%E6%B3%95


モデル・雅姫さんプロデュース　フラワーガーデンカメラグッズ | NikonDirect - ニコンダイレクト

同じ形でピンクのガーリーなものと、紺のクールで大人っぽいものと、違うテイストのものが並べられています。が、それによって二つのものが際立ち、さらに調和しています。

列挙法・列叙法

ある特定の対象に対して、関連性のある単語、あるいは文章を立て続けに並べて強調する手法。
「修辞技法」（2011年12月6日 (火) 05:32）『ウィキペディア日本語版』。
http://ja.wikipedia.org/wiki/%E4%BF%AE%E8%BE%9E%E6%8A%80%E6%B3%95


房の露 株式会社

それぞれに関連した写真を使い、全体で一つの表現をしています。

パロディ

知名度の高い記事や事件などを借用して、文章を面白おかしくしたり、物事を揶揄、風刺したりする表現。
「修辞技法」（2011年12月6日 (火) 05:32）『ウィキペディア日本語版』。
http://ja.wikipedia.org/wiki/%E4%BF%AE%E8%BE%9E%E6%8A%80%E6%B3%95


BOAT RACE OFFICIAL WEB SITE

ボートレースの「名人」戦を、剣術の名人である宮本武蔵と佐々木小次郎の決闘 になぞらえています。

以上です。
コピーライティング等から発想を広げ、効果的なヴィジュアル作成ができるようにしたいですね。

]]> レイアウトの基本的な型と、レイアウトからデザインまでの流れ tag:www.ar-ch.org,2012://2.188 2012-04-16T23:44:07Z 2012-05-07T17:32:58Z レイアウトの基本的な型と、レイアウトからデザインまでの流れ arch レイアウトからデザインまでの流れを把握しておくと、その間の思考が分断されずデザインがしやすくなると思います。
また、ユニークなレイアウトにするにしても、あらかじめ基本的な型を知っておくと逸脱がしやすくなりますね。]]> レイアウトに影響を与える要因

レイアウトにはいくつかの型がありますが、まずその型を決定する前に、レイアウトに影響を与える要因を知っておく必要があります。これらの要因によって、レイアウトの型があらかじめ決まったり、レイアウトが大きく変わるからです。

  • 情報階層の深さ
    →1ページのサイトなのか、第二階層以降ありグローバルナビゲーションが必要になるのか、など
  • サイトの目的・属性
    →そのサイトでは何を伝えたいのか。企業・ブランドのメッセージや情報、ユーザーに役立つ知識（Wikipediaなど）、告知など
  • 情報伝達の手段
    →ヴィジュアル主体で伝えるのか、文字主体で伝えるのか等

これらの情報を踏まえた上で、レイアウトの型を決めていきます。

レイアウトの基本的な型

Webサイトのレイアウトは、代表的なものとして以下が挙げられると思います。（名称は私が便宜上使っているものでして、一般的ではありません）

型が決まったら、以下4つのページの構成要素をはめ込んでいきます。

ページの構成要素

  • 1. ヴィジュアル
  • 2. 文字
  • 3. 余白
  • 4. 点・線・面（図形）

これらの要素を、どれだけの量でどのように配置し、何を伝えるか。
ここから装飾のデザインに入っていきます。
これらの要素をデザインすることで、ユーザーへのメッセージを明確にします。

以上です。
簡単なレイアウトはワイヤーフレームとしてディレクターから渡されると思うのですが、なぜこのレイアウトなのか、という思考が分断されやすいので、こういった流れを意識しておくと良いのかな、と思います。

]]> Webサイト制作において、私なりの色選定の考え方 tag:www.ar-ch.org,2012://2.187 2012-04-11T01:57:34Z 2012-05-07T17:34:57Z Webサイト制作において、私なりの色選定の考え方 arch 私自身良く迷うので、頭の中を整理するためにも、私なりの色選定の考え方をまとめてみました。]]> ※色の基本的な知識は既にあるという前提で書いてます。
色の基本的な知識がない方は、こちらを見ておくと良いかと。

色の選定にあたり、大切なことは、「目的」と「ターゲット」の2つだと思います。

目的について

目的とは、『色によって何を表現したいのか、ユーザーにどんなことを感じてほしいのか』ということです。
これをはっきりしておかないと、ユーザーへの色伝達の意図が曖昧なものになってしまいます。

目的の例としては、以下2つが挙げられます。（非常にざっくりとわけていますが...）

  • 1. 企業・ブランドのアイデンティティを出したい
  • 2. 企業・ブランド・商品・サービスらしさや、カテゴリーらしさを出したい

目的はそれぞれのみの場合や、1と2混合で考えられる場合があります。

ターゲットについて

ターゲットは、年代や性別によって色のイメージが異なるので、コアターゲットに対して与えたいイメージの配色にズレがないかを注意する必要があります。

コアターゲットに適した色がわからないという場合は、そのターゲットが使っている商品や、ターゲット向けに販売している商品等からヒントを得ます。

以上を踏まえて、目的の1と2の色についてその選定方法を考えていきたいと思います。

1. 企業・ブランドのアイデンティティを示す色

1. 企業・ブランドのアイデンティティを示す色とは

企業・ブランドのアイデンティティを示す色とは、その色や複数の色の組み合わせをみたとき、その企業やブランドを想起できる色（複色）のことです。
これは、ロゴや商品の色などに表れています。

例えばコカ・コーラであれば、『白・赤・黒』、ペプシコーラは『白・赤・黒・青』など。

2. 企業・ブランド・商品・サービスらしさや、カテゴリーらしさを示す色

企業・ブランド・商品・サービスらしさを示す色とは

企業・ブランド・商品・サービスらしさを示す色とは、それらにふさわしい雰囲気・イメージを示す色のことです。
この色の出し方は、まずその企業・ブランドにふさわしいキーワードの選定を行い、そのキーワードにあてはまる色を選択します。

キーワードにあてはまる色は、南雲先生の配色イメージチャートなどの配色に関する本や、kulerなどの色選定のWebサービスを利用して選ぶと良いと思います。

カテゴリーらしさを示す色とは

カテゴリーらしさを示す色とは、その企業やブランドの属すカテゴリー（同業他社）で多く使われている色のことです。

菓子メーカーであれば赤、黄色など、大学などの教育機関であれば濃赤や青、紺など。

以上を踏まえて、以下3つの色の使い方があると思うんです。

  • 1. 企業・ブランドのアイデンティティを示す色のみを使う
  • 2. 企業・ブランド・商品・サービスらしさや、カテゴリーらしさを示す色のみを使う
  • 3. 1と2の両方の色を使う
1. 企業・ブランドのアイデンティティを示す色のみを使う

この場合は、企業・ブランドの色のみで表現の意図が伝わりきるとき、企業・ブランドの色が「らしさ」を兼ねているときに適しています。

2. 企業・ブランド・商品・サービスらしさや、カテゴリーらしさを示す色のみを使う

この場合は、ロゴや商品等に「アイデンティティ」を示す色が無いとき、「アイデンティティ」よりも雰囲気やイメージを重視して伝えたいときに適しています。

3. 1と2の両方の色を使う

この場合は、「アイデンティティ」の色だけでは足りないとき、「アイデンティティ」に加えて雰囲気・イメージを伝えたいときに適しています。

色の選定

先ほどの1と2の場合、先に書いたように、色は自ずと決まってきます。その上で配色（ベースカラー、メインカラー、アクセントカラー）を考えます。

3の場合は、まず「(1) 企業・ブランドのアイデンティティ」と「(2) 企業・ブランド・商品・サービスらしさや、カテゴリーらしさ」のどちらを優先するかを考え、その上で色を選定し、配色（ベースカラー、メインカラー、アクセントカラー）を決めていきます。

(1) 企業・ブランドのアイデンティティを優先するとき

このとき、「アイデンティティ」の色は、ベースカラーもしくはメインカラーとして使われ、「らしさ」の色はアクセントカラーとして使われます。

(2) 企業・ブランド・商品・サービスらしさや、カテゴリーらしさを優先するとき

このとき、「らしさ」の色はベースカラーもしくはメインカラーとして使われ、「アイデンティティ」の色はアクセントカラーとして使われます。

以上です。
色選択の1つの考え方として参考になりましたら幸いです。

]]> Webサイトにおける目的客とフリー客について tag:www.ar-ch.org,2012://2.186 2012-04-11T00:00:37Z 2012-05-07T17:36:54Z 目的客とフリー客に表示する情報内容・場所の違い arch 「目的客」と「フリー客」について、またこの客層によって表示する情報の内容・場所の違いについて、自分用に軽くまとめています。]]> そもそも目的客・フリー客とは

目的客

その名の通り、目的をもって訪れるお客さんのこと。すでに欲しい情報や買いたいものなどが決まっている。

フリー客

目的なしに訪れ、興味のひかれた場所に気ままに行く。何か良い情報があれば知りたい、良いものがあったら買いたいというお客さんのこと。

Webサイト制作の際には、このどちらの客層がメインターゲットとなるかを把握しておく必要があります。
その客層によって、表示すべき情報の内容や場所が異なるからです。

目的客の多いサイトとフリー客の多いサイトの例

目的客の多いサイト例

  • 技術系情報サイト、ブログ
  • How to、ライフハック系サイト

フリー客の多いサイト例

  • Yahooなどのポータルサイト（検索以外の用途）
  • 日経新聞やITmediaなどのニュースサイト

目的客とフリー客はどのようにページ遷移するか

目的客のページ遷移例

  • トップページ→該当ページ
  • 検索サイト→該当ページ

フリー客のページ遷移例

  • トップページ→興味をひかれたページ

どんな情報をどこに表示したら良いか

目的客に表示する情報の内容と場所

  • 該当ページ、目的の情報の近くに、その情報と関連した情報

例：amazonの商品ページ、「この商品を買った人はこんな商品も買っています」

目的客は、サイトを訪れた時点で他の情報を受け入れる余裕がない
→目的の情報を見つけたあとで別の情報を提示する

フリー客に表示する情報の内容と場所

  • 新着情報
  • そのサイトでの人気コンテンツや見所

例：ZOZOTOWNトップページの「注目のアイテム」

とりあえず興味をもってもらい、このサイトにあるコンテンツや商品はおもしろい、と思ってもらえることが重要。
常連の場合は人気コンテンツはすべて読んでいる可能性があるので、新しい情報を提示する。

以上です。
目的客とフリー客、基本的なことなのですが大事なことなので、サイト制作の際には頭に入れておくようにしたいですね。

]]> ブログの『入り口』と記事の評価材料について考えてみた tag:www.ar-ch.org,2012://2.185 2012-04-09T01:45:34Z 2012-05-07T17:39:04Z ブログの『入り口』と記事の評価材料について考えてみた arch ブログの『入り口』とその『入り口』をつくってくれる個人の影響、またそれに対する記事の評価材料についてです。]]> 個人が『入り口』を作ってくれることが多くなった

TwitterやFacebook、はてぶなどからWebサイトやブログ記事を閲覧することが多くなった、という人は増えたのではと思います。

また、その際、『誰』の紹介したリンクかによって、リンクを踏むか踏まないかの決定をしていることはありませんか。
もしくはその『誰』がリンク先について感想を書いていた場合、その感想に引きずられていることはありませんか。

個人のバイアスがかかりやすくなった

個人が『入り口』を作ることが多くなった、ということは、それだけ個人のバイアスがかかりやすく、個人の影響力が及びやすくなったということだと思います。
それが例え無言の記事紹介でも、○○さんだから、というだけでリンク先が輝いて見えたりするのではないでしょうか。

  • ○○さんの情報なら信用できる
  • ○○さんが正しいと言っているから、自分も何となくそう思える

極端ですが、このように思ったことは一度くらいはあるはず。

「自分は例え誰の言った情報だろうと、自分で考えて評価するんだ！」という意識の高い人ならば別ですが、そうでない人も多いのではと思います。

自分の信頼している人、好きな人が良いって言ったものはなんとなく良く見えてしまうのじゃないのかしら。人間だもの。

評価された『入り口』に対して、自分で評価できる材料を提示する

バイアスはかかったままでも良いと思うのですが、閲覧者が記事を自分で評価できるように、材料を提示してあげるとより親切なのでは、と思います。

もちろんその材料が絶対ではありませんし、記事を読んでその人自身で判断していただくというのが一番良いです。
が、「まだその分野の知識が少なくて正当に評価できない」とか、「疑問に思っているけれど、みんなはどう思っているのか知りたい」といった場合もあると思います。
ですので、材料を提示するということは、閲覧者にとって良いことでは、と思います。

どれだけの数の誰が、どのように言及しているか

ではこの「記事を評価してもらえる材料」とは何かというと、Twitterでツイートされた数や、はてぶされた数など、自分以外の他の人の評価だと思います。

ただ注意をしたいのが、シェアやブックマークされた数＝良いと評価された数では無いということですね。
当ブログ記事のはてぶコメントを読んでいただくとわかると思うのですが、記事の内容は良くないと評価された数も含まれています。
ですので、閲覧者には、これも踏まえたで評価をしていただく、というのが良いですね。
（これをどのように周知するべきかは当ブログでも悩みどころです...）

目安となるもの一例

■SNSでのシェア

  • Twitter
  • Facebook
  • mixi
  • Google+
  • Tumblr　等

■ソーシャルブックマークでのブックマーク

  • はてぶ
  • livedoor クリップ
  • LinkedIn　等

■運営者・著者の紹介

『誰』が運営しているのか、どんな情報を書いているのか、どんな経歴か、等。

閲覧者は、運営者や著者がその情報に対してどこまで深い造詣を持っているのかを判断できるような情報を必要とします。

■他の記事の評価材料を提示する

まだ当該記事の評価材料が少ない場合は、他の記事の評価材料を提示することで、一応の目安になると思います。
うちのブログでいうと、はてぶ数のランキングでしょうか。

以上です。
ブログを運営されている方にとっては既にわかりきっていることだと思いますが、これからブログを運営しようと思っている方の参考になればと思います。

]]> PCのセットアップ時Webデザイナーに必要となるもの tag:www.ar-ch.org,2012://2.184 2012-04-04T01:14:46Z 2012-05-07T17:41:56Z PCのセットアップ時Webデザイナーに必要となるもの arch OSはWindows 7と考えています。
また、フリーランスや規模の小さい会社というのを想定しています。
他にもこんなのがあったらいいよー、というのがありましたら教えていただけると嬉しいです。]]> 制作ソフト

Adobe Web Premium

こちらのパッケージでなくても、Illustrator、Photohshop、Fireworks、DreamweaverがあればOK。
Flashは自分の扱う案件によって...だけど、Web Premiumには入っている。

オフィス系

Office Home and Business 2010

クライアントからの原稿や修正指示がオフィス系のソフトで送られてくる場合が多いのであった方が良い。
以下3つをよく使う。1つずつ買うよりまとめて買った方が安い。

  • Word
  • Excel
  • PowerPoint

公式から買うより、価格.com などから買う方が安い。

お金をかけられないときは、OpenOffice があるのでこちらを使う。
Google ドキュメントでも見れる。
※但し表示崩れなどが起こる場合もある。

メール/テキストエディタ

秀丸メール / エディタ

有料だけど高機能で軽く、カスタマイズ機能豊富。

フォント

改訂4版 TrueType フォントパーフェクトコレクション(CDROM付) (デジタル素材ライブラリ)（※アソシエイトリンクです）

3,129円という価格で商用OKの高品質な欧文フォントがたくさん収録されている書籍。今のところ必須。

モリサワパスポート

年額52,500で高品質な日本語書体を使える。今のところ必須。

Axisフォント

Appleサイトにも採用されている日本語書体。お好みだが使われる機会が多くなっているので、推奨。

カタオカデザインワークス

広告や雑誌で良く使われている日本語書体。こちらもお好みだが、デザインのクオリティがぐぐっと上がるのでおすすめ。

写真素材

素材辞典

オンラインより、家電量販店の本屋で買う方が安い（？）
サイトで写真を検索できるのが良い。
また、『イメージブック』シリーズは、画像サイズ小さいが、お手頃価格で多数の素材が収録されている。あるとかなり重宝。

amana等の写真販売サイト

メインビジュアル等の大きくて全体のクオリティに大きく影響する写真は写真販売サイトで購入する場合が多い。

無料商用可写真素材サイト

素材辞典や写真販売サイトに目的の素材がない場合や、予算が少ない場合は利用することも。
こちらの記事を参考に探す。

OS

Windows XP, vista, 7

WindowsではVirtual PCなどの仮想OSソフトを使えるが、表示が正しくない場合があることを留意しておく。

Mac OS10 以降

MacはOS10以降なら表示崩れはあまり気にしなくて良い？
BootCampを使ってWindowsのOSを入れられるが、OSのDVD-Rが必要。

ブラウザ

OSはWindows, Mac 両方そろえて、それぞれ各ブラウザを入れるとベスト。
ブラウザ確認('A`)ｳﾞｧｰ

Windowsの場合

Macの場合

ローカルサーバー環境

XAMPP

手軽にローカルサーバーを構築できるパッケージソフト。
ネット上にテストサーバーあればいいじゃん、って良く聞くんですが、私は、細かい修正のときいちいちFTPを通してファイルをアップロードするのは非常に手間のように思います。
お好みだけどあった方が良い。

Tortoise SVN

バージョン管理ソフトは大変便利なので入れておいた方がいいです。バックアップにも重宝する。
PSDやPNGなどのデザインファイルも、バージョン管理の方が複数前の保存状態にもどれたりして便利。
構築の方法はこちらを参考に。
（gitもある）

FTPクライアント

NextFTP

有料だけどその分、UIがこなれていて使いやすい。お金に余裕があれば。

WinSCP

多少くせがあるけれど、慣れれば快適で使いやすい。無料だけど機能豊富。

圧縮・解凍ソフト

Lhaplus

ウィルス対策ソフト

AVGアンチウイルス無料版

自分はしばらくAVGを使っていて問題なかったので、またしばらく使い続けてみようと思います。

有料版含めていろいろ比較検討したい方はこちらの記事を参考に。

その他

健康診断

あれちょっと違う？ｗ でも健康第一！市区町村で診断料が助成されることもあるので、一度調べてみると良い。

]]> 4月から無職になりました tag:www.ar-ch.org,2012://2.183 2012-04-02T05:47:50Z 2012-04-02T09:38:19Z 3月いっぱいで勤めていた会社から解雇され（業績不振のため）、4月から無職になった... arch 業績不振で解雇されたというと、「ああ不況なのね...」って感じがしますが、どうやら良く考えるとそれだけじゃないのではと思いました。
なので、ちかごろさいきんのWeb制作業界のことと、制作に携わる人は今後どうしたら良いのか、ということをつらつらと書いていこうと思います。
※ちょっとネガティブ目線も入ってしまいますが、批判をしているわけではなく、このままで良いのかな、という問いかけです。
※また、こういう会社じゃだめ、ってことではなく、こういう傾向になってるんじゃ、という考察です。]]> Web制作会社は二極化が進んでいる

まわりのWeb関係の友人に話を聞いていると、Web制作会社は以下の二極化が進んでいると思いました。

A. 安い価格で制作物はそこそこのクオリティ、夜遅くまで対応してくれる会社
B. マーケティング提案、情報設計、ブランド構築など得意分野を持っている会社

この二極化が進んでいるということは、クライアントもこういった会社を求めているということですね。

強みがなくても無難にそつなく制作をこなす会社は淘汰されていく

一昔前はそれでｵｯｹｰ☆だったのですが、今は価格が安くクオリティもそこそこな会社が増えてきました。

そういった会社と、「強みがなくても無難にそつなく制作をこなす会社」が競争しようものなら簡単に負けてしまいます。
同じクオリティならばより値段の安い方、夜遅くまで対応してくれる方を選びますよね。

さらにクライアントも業績不振の会社が多く、予算縮小や削減といった話をよく聞きます。
また、メールの時間をみると24時、25時くらいまで働いている方も多いです。
従って、クライアントも、Web制作会社をそういった視点で選ぶ傾向にあります。

蛇足ですが、一時期、クライアントが18時で強制退社になるところを担当しました。
そのおかげで自分も早く帰れていたので、つまりクライアントは早くかえｒ（ｒｙ

じゃあ何で勝負するの？

制作会社がクライアントに選ばれるために、何をもって競合と勝負するのか。

今は他に強みがないのでこれで勝負するしかないｳｳｫｰ

  • 安さ
  • 時間外対応

会社の（社員の）成長を考えてこれで勝負するんだｳｳｫｰ

  • 新しい技術（HTML5、SVG、アプリ制作等）を得意とする
  • 既存のもので得意分野がある（情報設計、デザイン等）

何を強みとするのかは、経営者の判断が大きいです。 そこで働いている人は、経営者の判断と自分の思いが一致していないと働くのがつらくなってきますね。
この点、見逃してしまいがちなのですが入社する前に確認しておくと良いです。

また、今は安さと時間外対応で勝負するしかないけど、少しずつ新しい技術を取り入れて強みをつくっていくんだ、という会社も増えていますね。

強いのは、「マーケティング提案ができて成果をあげられて、新しい分野にも貪欲に取り組む会社」

ハードル高いですね...
しかしこれが嫌ならば、先ほどの「価格と時間外対応」で勝負する会社になるしかないのではと。

個人（社員）はどうすべきか

多少安いお給料で夜遅くまで働くことも全然問題ないという人はそれで良いと思いますが、そうでない人は何か強みを持つべきだと思います。
デザインやコーディングなど、自分にしかできない分野を1つでも持っている人は強いです。
そういった人は、比較的高いお給料をもらったり、福利厚生の整っている会社で働いていることが多いです。

また、次々と新しい技術が生まれてくるWeb業界では、それを追いかけられる人が求められます。それができなくて辞めていく人もいました。

さらに今は若くて優秀な人（高校生でWebサービスをつくっちゃう人とか）がたくさんいます。
そういった人と自分が勝負するには、何で勝負するのか、を意識しておくと良いのではと思います。

私も現在、自分の適性と照らし合わせて強みを持つことを模索しています。

なんだかとりとめのない文章になってしまいましたが、この辺で。

-----
追記
私個人のことですが、今後、フリーランスになるか会社員に戻るかは未定です。
しばらくゆっくり考えてから、どうするか決めようと思っております。
また、その時はまわりの人にいろいろと相談させていただくと思いますので、どうぞよろしくお願いします。

]]> フォントの基本的な選び方 tag:www.ar-ch.org,2012://2.182 2012-04-02T02:09:41Z 2012-05-07T17:43:53Z フォントの基本的な選び方 arch フォントをどう選んだら良いのかわからない、もしくは選ぶのに時間がかかるという初心者さん向けです。]]> フォントには、それぞれ書体によって特徴があり、ユーザーに与えたい印象によって書体を選ぶ必要があります。

（それに縛られすぎてもいけませんが...（あえてインパクトを出すために違う印象のフォントを組み合わせたりする）、基本的な選び方として知っておくと良いと思います。）

私は以下の順番でフォントを選んでいます。
恐らく他のデザイナーさんも、この順番だと思います。

1. フォントの系統選び
2. 選んだ系統から、さらに書体を選ぶ
3. 書体のウェイトを決める
4. 字間の調整

さらに具体的な手順を1つずつ説明していきます。

1. フォントの系統選び

日本では、和文フォントと欧文フォントの2つを使います。
また、和文フォントは、以下の4つに大きく分けられます。

  • 明朝体
  • ゴシック体
  • 筆書体
  • 手書き文字

欧文フォントは、以下の4つに分けられます。

  • セリフ体
  • サンセリフ体
  • 筆記体
  • 手書き文字

それぞれ、これらの系統の中から表現したいイメージに近い系統を選びます。
各系統と特徴、印象の傾向を以下のようにまとめてみました。

2. 選んだ系統から、さらに書体を選ぶ

例えばゴシック体ならば、代表的な書体として以下が挙げられます。

  • 新ゴ
  • ヒラギノゴシック
  • 小塚ゴシック
  • AXIS
  • じゅん

同じゴシックでも、それぞれの持つ雰囲気は違います。
一般的に、とがっている部分が多いほど堅いイメージがあり、丸みが多いほどやわらかいイメージとなります。
これに沿って上の代表的なフォントを分類してみると、こんな感じです。

また、「とがっている部分が多いほど堅いイメージ、丸みが多いほどやわらかいイメージ」は、他の書体（明朝体や筆書体など）にも言えます。

3. 書体のウェイトを決める

書体の多くは、ウェイトのバリエーションを持っています。
一般的に、細いほど女性的で繊細なイメージ、太いほど男性的で力強いイメージとなります。

4. 字間の調整

最後に字間を調整します。
字間は、狭いほど活気があって元気なイメージ、広いほどゆったりとしておおらかなイメージになります。

以上です。
フォントは、多くの書体を「知っておく力」と、それを「選ぶ力」が重要になります。
デザインのクオリティを左右する重要な要素ですので、適切なフォント選びができるようになりたいですね。

]]> Webデザインの評価項目をつくる tag:www.ar-ch.org,2012://2.181 2012-03-12T01:02:40Z 2012-05-07T17:45:12Z Webデザインの評価軸をつくる arch 評価項目があると、デザイナーやディレクターだけでなく、クライアントにとってもデザインの基準がわかりやすくなり、目標地点が明確になります。
今までつくったことがなかったという方は、この機会につくってみてはどうでしょうか。]]> 改めて、Webデザインの評価項目をつくるメリットです。

  • デザイナー、ディレクター、クライアントにとって、デザインを評価する共通認識を持つことができ、三者間で認識のブレが少なくなる
  • デザインの優先すべき項目（もっと企業の色を出したい、など）がわかりやすくなり、それをデザインに反映させることができる
  • デザイナーは、すでに満たされている要素にそれ以上時間をかけることがなくなり、足りない要素に注力できる

    • デザインの評価項目とデザインエレメント一覧表

    私はWebデザインの評価項目を、以下のような表にしています。
    これはパッケージデザインの評価項目を参考に、Webデザイン向けに変更したものです。
    評価項目は抽象的ですが、一つの指標になると思います。

    エクセルでのダウンロードはこちら

    この表の使い方は、5つの評価項目をクリアしているデザイン要素（色・フォントなど）に○をつけるだけです。
    また、評価項目に優先度を設定することで、どの評価項目を重視するか、というのをクライアント、ディレクター、デザイナーで共有しておきます。

    評価項目とデザイン要素を可視化することで、クライアントが、もう少し「らしさ」を出したいと言ったとき、ではどの要素で「らしさ」を出すのかという検討ができます。 もしくはもう十分に「らしさ」は出ているので、むしろ「アイデンティティ」を出した方が良い、などの提案をすることができます。

    各評価項目について、以下説明をしていきます。

    1. 「らしさ」があるか

    その企業・ブランドらしさがあるか

    その企業・ブランドにふさわしい色や、フォントなどを選択しているか、です。
    どうすればその企業・ブランドらしく見えるのかを考え、適切な要素を選択する必要があります。

    カテゴリーらしさがあるか

    カテゴリーとは業種のことです。銀行ならば、銀行という業種にふさわしい色・フォント等があります。
    このカテゴリーらしさがないと、ユーザーのサイトに対する信頼性は低くなります。
    もしカテゴリーらしさがわからない場合は、以下サイトの各業種「シェア＆ランキング」に載っているサイトを検索し、法則性を見いだすと良いと思います。

    ジャンル別 業界一覧-業界動向サーチ
    http://gyokai-search.com/2nd-genre.htm

    2. コンセプト・メッセージは伝わっているか

    ユーザーにコンセプト・メッセージを伝える

    コンセプト・メッセージとは、一番伝えたいユーザーの利益のことです。これがデザインによって感覚的に正しく伝わっているかを判断しながらデザインをします。
    また、この項目は、キャッチコピーと絡む場合が多いので、そのコピーの持つ雰囲気やイメージと合うような要素を選択していきます。

    3. 印象に残るか

    ユーザーの印象に残るには

    印象に残るためには、他の競合サイトと異なる部分を持つことが必要です。
    ユニークな配色にしたり、あまり使われていないフォントを使ったりします。
    ただ、その時、ユーザーにどんな印象を与えたいか（かわいい、かっこいい、温かい、親しみのある等）も考慮してデザインをすることが必要です。

    4. アイデンティティがあるか

    アイデンティティによって、ユーザーは覚えやすくなる

    アイデンティティがあるか、とは、デザイン要素の中で、企業やブランドのもつ世界観とつながり、想起させるものを持っているかどうかです。

    例えばロゴや配色、キャラクターなどでその企業や商品とすぐにわかるものがあれば、アイデンティティがあるということになります。

    このアイデンティティは、Web独自で育成することは少なく、既存のロゴや商品デザインから借りてくる場合が多いです。

    5. 使いやすく・わかりやすいUIになっているか

    情報の順位づけはできているか

    そのページで伝えたい情報の優先度を色やフォント、レイアウト等によってわかりやすくしているか、です。
    これがないと全体的にメリハリのないページになってしまい、ユーザーにも伝えたいことが伝わりにくくなってしまいます。

    ユーザビリティを考慮しているか

    高齢の方や色覚障害の方にとって、きちんと判別できる色やフォント等を使用するというのは、Webでは一般的になってきました。
    デザイン性とうまくバランスをとりながら、ユーザビリティに配慮したデザインをつくる必要があります。

    また、UIに関しては、Webデザインのデファクトスタンダードに沿っているかどうかも重要です。

    デファクトスタンダードとは、事実上の標準のことです。
    例えば「文字に下線」はリンクにのみ使われるようにし、強調の意味などで使わないようにする、など。

    他のデファクトスタンダードにつきましては、以下ブログ記事に詳細がのっていますので、ご紹介させていただきます。

    livedoorディレクターズブログ | Webユーザインターフェースの "暗黙知" を意識していますか？ http://blog.livedoor.jp/ld_directors/archives/51475931.html

    -----
    以上です。
    クライアントとデザインの目標地点を明確にしながら、注力すべきところは注力し、効率よくデザインを仕上げていきたいものですね。

    参考：図解でわかるパッケージデザインマーケティング (Series Marketing)
    （パッケージデザインの本ですが、Webデザインに通じるところがかなり多くあり、ディレクターにもデザイナーにもおすすめです）

    ]]> デザインイメージを表す言葉まとめ tag:www.ar-ch.org,2012://2.180 2012-03-08T23:32:59Z 2012-05-07T17:46:49Z デザインイメージを表す言葉まとめ arch デザインイメージを表す言葉を思いつく限り書き出し、五十音順に並べてみました。
    使えない言葉もあると思いますが、言葉の語彙を増やしたい方の参考としてどうぞ。]]> あ行

    あ

    明るい、温かい、安心感のある

    い

    生き生きとした、インパクトのある

    う

    初々しい

    え

    エネルギッシュな、エスニックな、エレガントな

    お

    おおらかな、穏やかな、落ち着いた

    か行

    か

    格調高い、活気のある、堅い、がっしりとした、活発的な、革新的な、カジュアルな、可憐な、ガーリーな

    き

    規律性のある、キュートな、きれいな

    く

    クールな

    け

    健康的な、堅実な、元気な

    こ

    高級感のある、高貴な、ゴージャスな、古風な

    さ行

    さ

    さわやかな、斬新な

    し

    静かな、親しみやすい、シャープな、女性的な、自由な、重厚な、情熱的な、上品な、新鮮な、神秘的な、シンプルな、信頼感のある

    す

    スイートな、スタイリッシュな、スタンダードな、すっきりとした、スマートな

    せ

    清潔感のある、成熟した、整然とした、生命力に溢れた、洗練された、繊細な、前衛的な

    そ

    素朴な

    た行

    た

    大胆な、楽しげな、男性的な

    ち

    力強い、知的な、中立的な、中性的な

    つ

    て

    丁寧な

    と

    とがった

    な行

    な

    ナチュラルな

    に

    にぎやかな

    ぬ

    ね

    の

    のどかな

    は行

    は

    華やかな

    ひ

    ふ

    へ

    ほ

    保守的な、ポップな

    ま行

    ま

    み

    ミステリアスな

    む

    無機質な

    め

    明瞭な

    も

    モダンな

    ら行

    ら

    ライトな

    り

    リッチな

    る

    れ

    レトロな

    ろ

    や行

    や

    優しい、躍動感のある、柔らかい

    ゆ

    優雅な

    よ

    陽気な

    わ行

    わ

    若々しい

    他にもこんな言葉あるんじゃない？っていうのがありましたら、教えていただけますと嬉しいです。

    ]]>     Webサイトの「目的」と企業の「強み」とユーザーの「利益」とデザインについて tag:www.ar-ch.org,2012://2.179 2012-03-04T23:30:07Z 2012-05-07T17:48:15Z Webサイトの「目的」と企業の「強み」とユーザーの「利益」とデザインについて arch その差はどこにあるんだろう？って考えたとき、その理由の1つとして、マーケティング視点でデザインを考えられているかどうか、ということに気がつきました。
    ですので、今回の記事では、デザイナーにあると良い基本的なマーケティングの視点をまとめてみました。マーケティングのことがほとんどわからないというデザイナーさん向けです(╹◡╹) ]]> 私が思う、デザイナーにあると良い基本的なマーケティングの視点は、次の3つです。

    • Webサイトの「目的」がわかる
    • 企業や商品の「強み」がわかる
    • ユーザーの「利益」がわかる

    では1つずつ具体的にみていきます。

    1. Webサイトの「目的」について

    Webサイトにはどういった目的があるのか

    Webサイトは、何らかの目的があってつくられています。
    よくある目的として、以下のようなものがあげられると思います。

    • 売上Up
    • 店舗への来店率Up
    • 会員登録数Up
    • 企業やブランドのイメージUp

    この時、企業はWebサイトを通して、どのように目的を達成しようとするのでしょうか？

    目的を達成するには？

    まず手段として、メインビジュアルや特集ページで訴求したり、メールマガジンを送ったり...方法は色々あると思います。

    では、メインビジュアルや特集ページ、メールマガジンでは、どんな要素があれば、目的を達成できるのでしょうか？

    魅力的な商品写真でしょうか？
    心に響くコピーライティング でしょうか？

    もちろんこれらは不可欠な要素ですが、その根幹にあるのは企業や商品の「強み」 です。

    企業や商品の「強み」を意識する

    例えば、有機野菜を使ったレストランや、これまでにない新食感のハンバーガーや、専門性にこだわったコンサルタントサービスなど。企業やその商品は、競合他社にはない独自の「売り」を持っており、これを強みと言います。

    「強み」はユーザーに選ばれる理由となり、Webサイトの目的を達成するための軸となります。

    2. 企業や商品の「強み」について

    「強み」の例

    企業や商品の「強み」にはどのようなものがあるのでしょうか？
    コーヒーショップチェーン店を例に、強みをいくつか挙げてみます。

    • スターバックスコーヒー
      高品質なコーヒーで、たくさんのフレーバーがある。また、カスタマイズのバリエーションが豊富。禁煙なので純粋なコーヒーの香りが強く感じられる。
    • タリーズコーヒー
      高品質なコーヒで、かつ喫煙可なのでコーヒーを楽しみつつ煙草休憩ができる。コーヒー以外のビバレッジも豊富なので、コーヒーが苦手な人も行きやすい。
    • ドトール
      手頃な値段でコーヒーを楽しめる。フードも他2店舗と比べると充実しているので、休憩だけでなく食事利用もできる。

    こんなところでしょうか。

    これらの強みは、ユーザーが競合他社を比べたときの選定理由になります。

    強みがなくなるとどうなる？

    例えば、タリーズが強みの1つの「喫煙可」をなくし、スターバックスと同様に禁煙にしたならば、お客さんの入りはどうなるでしょうか？

    現在、喫煙者は少なくなってきていますが、それでも「喫煙可」でコーヒーが飲める、という需要はまだまだ多いと思います。

    煙草を吸いたくて高品質なコーヒーが飲みたいというお客さんは、他のお店へ行ってしまうと思います。ちょっと高めだけど煙草の吸える喫茶店に行くか、味は多少物足りないけどドトールにするか、などの選択肢がでてきます。

    このように「強み」は、お客さんに選ばれるために必要なものですね。

    さらに、「強み」によって、お客さん（ユーザー）はどんな「利益」を感じられるのでしょうか？

    3. ユーザーの「利益」について

    企業や商品の「強み」とユーザーの「利益」の関係

    企業や商品の「強み」とユーザーの「利益」は、直結しています。

    例えば、スターバックスの強みと、ユーザーの利益をあげてみます。

    企業の強み...豊富なフレーバー
    ↓
    ユーザーの利益...たくさんの味を楽しめる、新しい味の発見、自分好みの味が見つかる

    ユーザーは、自分の利益を得るためにお店へ行きます。

    そしてWebサイトの役割の1つは、ユーザーの利益をわかりやすく伝え、ユーザーの利益を喚起する、ということです。

    そしてこの役割には、「デザイン」という要素が大きく関わってきます。

    4. デザインについて

    デザインが伝えられること

    デザインは、ユーザーが何を得られるかというのを感覚的に伝えます。
    文字（文章）ではそれを直接的に伝えますが、文字だけでは伝えにくい雰囲気や空気感といったものをデザインは伝えることができます。

    ※イメージ画像ださくてすみません...orz
    デザインは文字の情報を補足し、雰囲気や空気感を伝えるということがわかっていただければ。

    文字やデザインによって、ユーザーの「利益」がユーザーに伝わりやすくなると...
    ↓
    ユーザーに、体験や感情の欲求を起こさせやすくなる（食べたい、見たい、行きたい、など）
    ↓
    来店率や売上が上がる
    ↓
    Webサイトの「目的」が達成されやすくなる

    関係が安直ですが、大体こんな流れかな、と思います。

    ユーザーの「利益」を考えたデザインは他と差別化できる

    また、企業の「強み」やユーザーの「利益」を考えたデザインというのは、企業の「らしさ」が反映されて、他サイトと差別化できるようになります。
    すると、ユーザーの印象に残りやすくなり、覚えてもらいやすくなります。
    これらも、来店率Upや売上Upの要素となり、Webサイトの目的達成の一因となります。

    もちろん、この場合に当てはまらないサイトも多くありますが、当てはまりそうな場合はこういったことを考えると良いのでは、と思います。

    1つの参考にしていただけますと幸いです。

    -----
    では具体的にどうやってデザインをつくっていくのかをざっと簡単に書いてみます。
    これはあくまでも私の例なので、こんなつくりかたもあるんだ、くらいに思ってくださいませ...(´ω`)

    ユーザーの利益と、企業がユーザーに伝えたいことをそれぞれリストアップします。
    例えば、いちごフレーバーのコーヒーという商品が発売されることになり、それの特集ページをつくることを想定します。

    ユーザーがそれを飲んでどういう気持ちを味わえるのか（プラスな感情）＝利益として、以下のようにリストアップしました。

    • 目新しい
    • さわやか
    • 新鮮
    • 今までにない感じ
    • ジューシー
    • 春っぽい

    また、企業がユーザーに伝えたいこと（感じてほしい気持ち）は以下のようにリストアップしました。

    • 今までにない味を感じてほしい
    • さわやかな気持ちになってほしい
    • 春という季節感を感じてほしい

    これらから、デザイン選定のキーワードを抜き出します。
    キーワードは、「さわやか」「ユニーク」「新鮮」「春」にしました。

    あとは連想ゲームです。さわやかさを表すにはどうすればそう見えるのか、ユニークさを表すにはどうすればそう見えるのかなどを考えて、色・フォント・レイアウト・写真orイラストを選定していきます。
    浮かばないときは、参考サイトを見ながらインスピレーションを得ます。

    どうすればどう見えるかってことを意識してデザインすると良いと思います（前会社の先輩からのありがたい教え）

    このようにデザインをつくっていき、ディレクターやクライアントとズレがないか確認しつつ進めていきます。
    簡単な説明で申し訳ないのですが、大体こんな感じでしょうか。
    詳しい説明はそのうち書きたい...と思います...そのうち...(´ω`)

    ]]>     デザイン上級者 21の特徴 tag:www.ar-ch.org,2012://2.178 2012-02-19T23:04:23Z 2012-05-07T17:50:04Z デザイン上級者21の特徴をまとめてみました arch 『上達の法則 - 効率のよい努力を科学する -』という本です。この本には、碁や茶道など、あらゆる分野に共通する上級者の特徴がのっています。この本を参考に、デザイン上級者の特徴と、上級者になるための実践方法を書いてみました。]]> デザイン上級者の特徴

    1. 上級者は一つのデザインから読み取ることが多い

    一つのデザインを見たとき、上級者の方が中級者、初級者よりも気づくことが多いです。例えば、背景に薄くグラデーションがかかっているとか、縦のグリッドのラインが揃っているなど。
    また、そのデザインからたくさんの情報を引き出しているので、長く見ても退屈しにくいという特徴を持っています。

    2. 上手なデザインをするということに高い価値をおいている

    上級者は、デザインに対して本気で取り組む度合いが高いため、上手なデザインをするということに高い価値をおいています。
    また、私生活でもその意識が続いているため、何気なく目にしたPOPや製品など、自然と良いデザインのものに惹かれる傾向にあります。

    3. 他分野のデザインを取り入れるのがうまい

    上級者は、他分野のデザインを転用し、自分の分野のデザインへ取り入れるのがうまいです。例えば、今では良く見かけるようになりましたが、Webデザインにスケッチブックや木目の質感を使ったりします。また、自然物や人工物からレイアウトのインスピレーションを取り入れたりするのもうまいです。

    4. 幾通りかのパターンを考えながら作業できる

    もしここがこうなっていたら、デザインはこう変わる、という全体感を考えながら作業ができます。
    また、そのように考えながらデザインをしたため、出来上がったあとでも、ここを移動させたらどうなる、という仮定を容易にすることができます。

    5. 抽象的なデザインを言語化できる

    自分の中で言語化をすることによって、そのデザインで伝えたいことを明確にしています。
    例えばスポーツ系のサイトなら、『今まさに走っているような疾走感溢れるデザイン』や、『生き生きと動いているような躍動感が伝わるデザイン』など。

    6. デザインのパターンを複数考えたとき、その中から一番適したデザインを判断できる

    上級者は、どのようなデザインならどう見えるか、ということを素早く想定できます。またその想定が正確なので、一番適したデザインを判断できます。

    7. デザインの急所を探り当てるのがうまい

    上級者は、デザインの評価に大きく影響するデザインの急所を探り当てるのがうまいです。また、この急所をつくるのに時間をかける傾向にあります。

    8. デザインに共通認識を見出す

    違うデザインでも、意味が同じだったり、意図していることが同じデザインを見出すことができます。例えば、こちら（http://www.osaka-shinai.jp/）とこちら（http://www.eccjr.co.jp/）のサイトのキービジュアルでは、楽しく学べそうな雰囲気という意味では同じです。

    9. 直接役に立たないようなデザインの知識を持っている

    デザインでは、起源や成り立ち、歴史を知っていても、直接役に立つことはほとんどありません。例えば、Helveticaフォントは1957年にスイス人が発表した、など。
    しかし、デザイン上級者は、デザインに本気で取り組む姿勢が高いため、デザインに対して愛着を持ち、自然と知識を求める傾向にあります。

    10. 一見無関係なことからデザインのヒントを得る

    デザインの問題を深くつきつめる姿勢ができているので、一見無関係な他の事象からヒントを得やすい傾向にあります。
    例えば私の先輩デザイナーは、静けさを表現するデザインを探していたときに、陶器の展覧会へ行って、その陶器が白のシンプルな台にかなり広い間隔で置かれているさまからインスピレーションを得たと言っていました。

    11. 細部へのこだわりを持っている

    上級者は、中級者や初心者が気がつかないような細部へのこだわりを持っています。また、その細部についても多くのパターンを知っており、その細部に注意を払うことに面白さを感じています。
    また、細部が全体的なバランスを左右することを認識しています。

    12. 自分なりのデザインに対するポリシーがある

    商業デザイナーである以上、ポリシーを持つことは避けるべきことかもしれませんが、それでも上級者であればあるほど、自分なりのポリシーを持っている人が多いように感じます。
    例えば、購買意欲をそそるページで、写真がドーンと大きく、また文字もドーンと大きいようなデザインは、確かに心動かされるものがあるのだけど、あまり好きではない、とか、自分はこうしない、などと考えることがあると思います。

    13. デザイン鑑賞のツボを心得ている

    他者のデザインを見るとき、鑑賞のツボを心得ており、またそのデザインの急所を正確に把握できます。

    14. デザインがクライアントに通らなかったり、プレゼンに負けたりすると強くくやしがる

    上級者ほど、デザインに本気で取り組む姿勢が高いので、自分の作ったデザインが通らなかったり、選ばれなかったりすると、くやしがる気持ちが強いそうです。しかしそれを表に出さないので、傍目には淡々としているように見えるとか。
    これを読んでいるデザイナーさんはどうでしょう？

    15. 他者のデザインを見るのを楽しむ

    上級者は、他者のデザインから、自分のデザインの参考になるヒントやインスピレーションを見つけるができます。他者のデザインを見ることで自分のデザインレベルを向上させることができるので、他者のデザインを見ることを楽しみます。

    16. 細かな部分のデザインから、そのデザインの評価ができる

    上級者は、他者のデザイン細部から多くのことを読み取り、それによってデザインレベルを推し量ることができます。また、おのおののデザインに対する比重判断もできます。例えば、デザインレベルを1～5としたとき、カーニングが甘いのでデザインレベルは1、とか、全体的には良いが縦のグリッドラインがわずかにずれているのでデザインレベルは4、など。

    17. 自分のデザインの評価軸が変わる可能性があることを承知している

    他者への評価は、現在の自分のデザインレベルに応じた評価なので、これから先自分のデザインレベルが向上すればその評価にも変化があることを認識しています。

    18. 他者のデザインの模倣がうまい

    上級者は、他者のデザインの特徴を言語化して理解することが早いので、模倣をするのが上手です。例えば、ボタン1つを作るにしても、Apple風のメタリックなボタンとか、ユニクロ風のあっさりとしたベタ塗りのボタンなど。

    19. 自分のデザインの個性（欠点につながるクセを含め）を自覚し、得意なデザインを認識している

    他者とデザインを比べたときに自分のデザインの長所を自覚したり、他者からの評価によって自分のデザインの個性を認識します。 また、クセについても認識しており、そのクセの原因や悪影響について洞察することができます。

    20. 自分独自のデザイン練習方法を持っている

    上級者は、自分なりのデザイン上達方法を持っており、またそれを工夫することができます。例えば、クールなデザインをする能力を伸ばしたいと思ったとき、その雰囲気のデザインを集めたり、研究したり、実際に自分で作ったりします。

    21. 中級者や初心者から学ぶことができる

    上級者は、中級者と初心者の部分的に優れたところを見抜き、それを取り入れることができます。また、デザイン初心者向けに書かれた本などから、あらたな発見を得ることができます。

    実践方法

    デザイン上級者になるための実践方法を考えて、まとめてみました。

    • デザインを細かく見るクセをつけ、気づいたことをメモしておく
    • スケッチをする
      参考：
      [連載]Webデザイン入門（2:スケッチしよう） | Stocker.jp / diary
      http://stocker.jp/diary/web-design-2/
    • 上手なデザインとは何かを自分の中で定義しておく（その定義は流動的であっても良い）
    • 高い意識でデザインするということを心がける
    • 他分野のデザインをみて、自分の分野のデザインに使えそうなものをメモしておく
    • 他分野のデザインを自分の分野のデザインに見立てる練習をする
    • いろいろなパターンのレイアウトやデザインを試しながら、または頭に思い描きながら作業する
    • 構成（ワイヤーフレーム）に縛られない
    • 雰囲気に適したデザインの解を、自分なりに持っておく
    • デザインサンプルがまとめられた書籍やサイトをたくさん見て、デザイン上級者の解を知る
    • 他者のデザインを見たときに、そのデザインの全体感に影響している一番大きな要素が何かを考えるクセをつける。それはWebデザインだと、キービジュアルである場合が多いが、レイアウトの奇抜さや、フォント使いであったりもする。
    • デザインのヒントを得られそうな場所、ものを考え、そこへ行ったり、手に入れたりする。
    • デザインの細部にどんな特徴があるかを見出す

    以上です。
    自分自身、デザインを上達させるにはどうしたらいいのかと悩んでいたので、同じように悩んでいる方々の一助になれば幸いです。

    2012/02/22 追記：
    デザインの急所をうまく突いたサイトがあれば教えてほしいとのご要望をいただいたので、3つサイトをピックアップしてみました。
    私が思うデザインの急所は、「その会社・ブランドらしさを表現するデザインアイデンティティ」を持ち、かつ、「全体のデザインクオリティをアップさせるもの」ですので、その基準もとに選びました。

    株式会社中川政七商店

    こちらのデザインの急所は、縦に区切られたユニークなレイアウトと、背景に敷かれた和柄でしょうか。レイアウトでは、他サイトとの差別化をするとともに、和風モダンな雰囲気を出しています。また、背景に敷かれた和柄は小粋な上品さを持っており、この会社と、会社の商品が持つイメージを表しています。

    スマートデザインアソシエーション

    こちらのデザインの急所は、背景に大胆に敷かれた円状のパターンと、3色（水色・黄色・黒）のシンプルな色遣いですね。背景のパターンでインパクトを出し、また、色遣いによってスマートさとクリエイティブな印象を受けます。戦略的な大胆さのあるデザインと言えると思います。

    マイ・フェイバリット関西（マイフェバ）

    こちらのデザインの急所は、メインビジュアルをはじめとした各コンテンツへリンクするバナー（ビジュアル）だと思います。どれも文字・写真・イラストに気を配り、手の込んだビジュアルで、1つ1つのコンテンツがとても魅力的に感じられます。また、ビジュアルの中で彩度の差が大きく、落ち着いた印象を与えつつターゲット（恐らく20代の女性）の好みそうな色やモチーフを使っているのもポイントですね。

    ]]>