WEB上でもこの集客がある時期に、合わせて新しくコンテンツなどをアップしたり、さまざまなページを「春」らしくしていき、春物商品を出していくと思います。
今回は、「スプリングコレクション2010」として、例えばWEB上に春の特集をアップするとします。そういった場面でどうしたら「春」らしく見せ、商品を訴求していけるかを具体的に考えていきたいと思います。

商品を選ぶ（撮影する）
商品を選ぶ際にはもちろん春らしい商品をチョイスすると思いますが、ファッションの場合、ご存知の通り「素材」「色」「形」が訴求ポイントとなります。
撮影する際、カラー展開が複数あった場合に、「売れ筋だから」とブラックやブラウン、ネイビーなどを撮影するよりも、ビジュアル的な訴求力を考え、春らしいピンクやグリーン、または花柄などといった商品をチョイスする方がより「春」らしいイメージが伝わり、ユーザーへの訴求力は高くなります。

プラスアルファな飾り付けをする
商品を並べただけでも春らしくなりますが、それにちょっとした飾り付けをして、さらに春のイメージを分かりやすくユーザーに印象付けていきたいと思います。
「春」といったら、一般的に何をイメージするでしょうか？
＜花＞や＜蝶＞、＜葉＞や＜木々＞、＜蛙＞や＜ひよこ＞なんてものもあると思います。
花が一番イメージしやすく、わかりやすいモチーフですが、どんな花を選ぶかによって、与えるイメージが変わりますので注意が必要です。
フレッシャーズや新生活をイメージさせるなら定番の「桜」、幼稚園入園・小学校入学などターゲットの年齢層が低いものなら「チューリップ」など、花が持つ印象を考えて飾り付けをしていかないと意味がありません。
今回はOLさんを対象とした春のファッションをご紹介するということにしたいので、華やかな女性らしいイメージの「ガーベラ」＋かわいらしさを出すために「蝶」を使い表現してみます。

細部にこだわる
ここまできたら、後は「価格」や「アイテム名」「取扱いショップ」などテキスト情報を表記して終了です。ここで一旦、一段落したいところですが、ここは細部にもこだわってページ内の統一感を持たせ、完成していきましょう。
各アイテムで共通となる項目は、同じ色だったりアイコンをつけたりして分かりやすくします。ここはあくまでテキスト情報が主体になる部分なので、視認性の悪い色を使って読めなかったり、文字サイズを小さくしすぎたりして読めないのは×です。

このようなWEB上の特集はもちろんメルマガなどでも、まず情報の整理をし、何の情報をどういった風に見せていけば効果的に＆訴求力を高められるかを考え作成していくのはとても重要です。
そのための“ちょっとした工夫”を積み重ねていけば、よりよいコンテンツになっていくのだと思います。

さて、この「クリック率」を上げるために、どのような作り方が出来るのでしょうか？
案件や配信数、配信先の流動性等を考えると一概には言えませんが、
実際に弊社で作成してクリック率が上がった、或いはクリック率をキープしている実例を
何点かご紹介したいと思います。

●フォーマット化した色や形を変えてみる
紹介している内容は毎回違っていても、同じフォーマットで紹介していくと
いくら魅力的な情報を発信していてもユーザーは飽きていってしまい、
内容を読んでくれなく（＝クリックをしなく）なってしまいます。
さまざまなテナントを紹介していかなければならないSCのメルマガなんていうのは
まさにそれにあたると思います。

＜季節ごとに色に変化を持たせてみる＞
例えば、HTMLメールであれば、ポイントで使う色をシーズン毎に変えるだけでも
ぱっと見の印象が変わるので、変化した印象をユーザーに与えることができます。

＜罫線の使い方を変えてみる＞
例えば、テキストメールであれば、PCのメルマガのようにタイトル等を囲む罫線を
回によって変えれば、色の変化を付けなくとも違う表現をすることができます。
さらにPCメールとは違い、大半の携帯電話ではメールを“等幅フォント”で表示させますので
上下のズレによるデザイン崩れ等が起こりにくく、表現したい形を表現できます。

●テーマ設定や、紹介の切り口を変えてみる
紹介している内容は同じでも、例えば1回のメルマガ内で共通のテーマを持たせたり、
違う切り口での紹介をすることによって、メルマガ内に変化を持たせる手法も有効だと思います。

＜テーマ設定をしてメルマガ内に流れを持たせてみる＞
毎回、新着のおすすめ商品をただ漠然と紹介するだけではなく、
「今の時期だからこそ」「この時に便利な商品」など、テーマ性をメルマガに持たせた紹介方法です。
例えば、【寒～い冬を乗り切る！あったか特集】というテーマで、
　1）ファッション：ジャケット、コートなどアウターを紹介
　2）服飾雑貨：マフラー、手袋、ホットインナー、ファー付きアイテムなどを紹介
　3）カルチャー＆雑貨：暖房家電や、カイロ、湯たんぽ、鍋グッズなどを紹介
　4）食品：鍋セット、おでん、カプサイシン食品などを紹介
　5）レストラン＆カフェ：鍋料理各種、ラーメンなどをご紹介
　6）サービス：マッサージで代謝アップ、ゲルマニウム温浴などをご紹介
ファッションからサービスまで紹介すれば、幅広くショップの紹介をカバーできるとともに
バラバラと紹介されないのでユーザーにとっても一連の流れをつかむことが出来、
クリックする確率が高まるといえます。

モバイルメルマガを［継続して見てもらう］［飽きさせない］ように作成するために、
配信後のアクセス解析を毎回していくのはもちろんのこと、
さらに、毎回配信ユーザーに合った、或いは［継続して見てもらう］［飽きさせない］メルマガにしていくために、上記のような改善・実施を日々実践していかなければならないと思います。

★モバイルのメールマガジン作成・配信にご興味をお持ちの方は、お気軽にお問い合わせください。

下記の一覧は、今年の夏バーゲンからクリアランス開始時期くらいまでに私の携帯電話で受信したメルマガタイトルの一例です。
（△△△と○○○は施設名と想定して下さい）

一覧で並ぶと、たった15文字の中でいかに考えて、タイトルをつけているのかが分かると思います。
ただ、内容は良いのにタイトルが全く関連性がない、少し工夫するだけでもっとよくなるのに、惜しいタイトルなどがありましたので、私なりに分析してみました。
この中で開封したい、読みたいメルマガ、ついついクリックしてしまいそうなメルマガは・・・？

このように、訴求力UPのポイントを盛り込む、また、毎回タイトルを変え鮮度を持たせることで、モバイルメルマガの「訴求力」・「開封率」をアップさせていくことがタイトルを付ける上で必要な点です。

●モバイルの特性を活かしたメルマガの作成表現例
モバイルのメルマガではPCとは別に、制限項目が多くあります。
その中でいかに訴求力を高め、ユーザーを引きつける内容にし見せていくのかがひとつのポイントとなると思います。
PCメルマガと少しかぶるところもありますが、モバイルの小さい画面の中でどれくらいの表現が可能なのでしょうか。

（1）顔文字
顔文字はPCでも多用されますが、モバイルでもまだまだ多くみられる表現です。
親近感を出すために会話体で文章を書くときと併用することが多いようです。

（2）テキストでの装飾
こちらもPCと同様、テキストメールによく使用されます。また、画像を多用できないモバイルのHTMLメルマガでは★■▲●+-*/などの記号文字に色を付けて、ある程度までビジュアルイメージに近づけた表現を行うことも可能です。

（3）半角カタカナ
画面サイズが小さいモバイルは、いかに文章を少なくしてサイトに誘導させるかが重要になってきます．その際、全角で1文字使用していたところを1文字で２文字使えるようになれば、画面使用量を節約でき、その分効果的な配信を行って行くことができます。

この他にも、全て半角カナだと逆に読みづらくなってしまう部分、また、目立たせたい部分だけを全角カタカナを使用する、という使い方も有ります。

また、いずれも注意しなければいけないのは、
「配信するユーザー」にとって違和感のない、不快感を覚えない、見やすい表現を心がけること。モバイル特有の表現は、使い方を少しでも間違えると、一方では受け入れられる表現が他方では嫌悪感を覚える表現になりかねません。

●サイトへいかに誘導させるか
（1）受け手ページの充実を！
・受け手になるページに、さらに詳しい＆ユーザーが知りたい情報が掲載されて
いないと、次回からユーザーはアクセスしてくれなくなる。
→メルマガでの誘導はもちろん、受け手ページの充実が重要。（MD情報の発信）

（2）メルマガだけで完結させない
・メルマガ本文に全ての情報を書いてしまうと、そこで完結してしまうためサイト
へジャンプしない。
→モバイルは画面が狭く、表示できる文字数に制限があるため、一文が長くなり
すぎないよう20～25文字程度で掲載しサイトへ誘導させる。

（3）目的やターゲットによってメール種類を使い分ける
・例えば「セール日程の先行告知」はショートメール、「詳細なセール情報」は
HTMLメール、と内容によって配信メルマガの種類を使い分ける。

（4）開封され、閲覧されやすい時間帯に配信する
・例えば夕方の帰社時間に合わせた配信を行い、電車の中で閲覧してもらう。
また、ランチ前にメルマガを配信しクーポンのお知らせをする、なども。

●まとめ
・タイトルを毎回変え、訴求力・開封率をUPさせる
・メルマガの種類をミックスして使い、日程・時間帯に考慮した配信を行う
・視読率を上げる
・受け手ページであるサイトの充実を行う
・ターゲット×モバイル特性を考慮した、タイトル・内容にする

モバイルメルマガをいかに効果的に使って行けるか、上記のまとめにとらわれず実践やユーザーの反応を反映させ、より効果のある使い方を模索して行かなければならないと思います。

★モバイルのメールマガジン作成・配信にご興味をお持ちの方は、お気軽にお問い合わせください。

●メルマガの特徴
次に各メルマガの特徴として、下記が挙げられます。

【テキストメール】
・専門技術が要らず、手軽に作成できる。
・テキストベースなので、メルマガ受信者の負担（パケット代金）が軽い。
・短い期間での制作が可能。その為、即効性がある。
（！）注意点
・URLのリンク表記だけで、2～3行の行数を使ってしまう。
・（罫や記号でテキストベースでの装飾はできるが）見た目の印象が簡素。

【HTMLメール（デコメ）】
・画像挿入や文字色指定、絵文字などビジュアル的（装飾）な訴求力が高い。
・サイト誘導のリンクを短く表出させることが出来るため、発信力が高い。（視読率が高まる）
※実際に弊社で受注しているモバイルメルマガの配信で、テキストメールよりHTMLメールの方がクリック率が高い事例があります。
（！）注意点
・画像や文字色など装飾を施すので、メルマガ受信者の負担が重い。
・各端末で受信できる容量（文字数等）に制限がある。

それぞれに挙げている特徴でも分かる通り、HTMLメールだからテキストメールよりもたくさんの人が読んでくれる、テキストメールだからHTMLメールより効果がある、というわけではありません。
配信する目的・内容、またタイミングに合わせ、それぞれの長所を活かした配信を行うことこそがいちばん重要になってきます。
メルマガ配信の効果をよりアップさせていくには、テキストメールやHTMLメール、文章量の少ないショートメールなどをミックスさせて配信していくことが望ましく、それでこそメルマガを活用していくことになるのだと思います。

●携帯端末毎の見え方の違い
docomo、au、ソフトバンク・・・各携帯電話会社には仕様の違いがあります。閲覧するユーザーの端末によって見え方が違う、ということを想定して作成していく必要があります。

【受信可能な最大文字数に制限がある】

上図のように、各携帯電話会社で制限項目が設けられているので、docomo準拠で作成を行うのが一般的です。
・件名最大文字数→全角15文字（半角30文字）
・本文最大容量→テキスト部分・HTML部分をあわせた約10Kb以内でのメルマガ作成

●ユーザー使用機種の設定による見え方の違い
携帯電話各会社の違い以外にも、個々のユーザーの携帯電話端末設定による見え方の違いがあります。こちらも想定して作成を行わなければならないと思います。

【文字の大きさをユーザー側で変更している】

同じメルマガを受信していても、文字サイズで見え方ががらっと変わります。
1行で見せたい文を10文字以下にする、コメントなど長い文章部分は無理に改行せず20～25文字程度にするなど、なるべく幅広いユーザーに対応して作成を行っていくことが重要です。

【端末毎のディスプレイの明るさの違い】

検証用の携帯端末ではきちんと読めていても、端末によってはディスプレイ自体の彩度が低かったり、ユーザー自身でコントラストを高く設定している場合があります。
文字色や背景色の明暗差をつけるなど、どの端末で見てもわかりやすい配色を行っていくことが必要です。

今回は基礎知識としてご紹介しましたが、次回はモバイル特性を活かしたメルマガタイトルの付け方やサイトへの誘導方法等をご紹介します。

★モバイルのメールマガジン作成・配信にご興味をお持ちの方は、お気軽にお問い合わせください。

もちろんデザイナーであってもそれは変わりません。
コンテンツやバナー、どんな場合のデザインでも、ユーザーに合致したデザインの提供、或いは以前のものと少しでも向上するにはどうしたらよいのでしょうか？

ご存知の通り、WEBサイトはアクセス解析が容易に行え、数値で効果測定をすることが出来ます。
例えばトップページのバナーを1つとってみても、そこからのアクセスがデザインを変えた前後で変化しているのかどうかなど、簡単に調べられます。
その結果に基づき、デザイン上のちょっとした工夫で
「ユーザー側が見たい情報」＝「提供側が見せたい情報」を近づけていくことができ、
結果としてアクセスUPに繋がっていくと思います。

■トップページからのページクリックをUP！させるアクセス活用例とは？
例えばトップページからのアクセス（クリック率）をUPさせたい場合、
アクセス解析をどのように活用していけばよいのでしょうか？
ここではとあるAサイトでの実際のアクセス解析を基に、アクセス解析の結果をデザイン上にどう落とし込んでいくかを考えてみたいと思います。

まず、現状の分析をするため、リニューアル前1週間程度で日別にトップページからのアクセスを解析し、数字を出します。

そしてそこから気付いた点や、問題点を探っていきます。

1）ニュース記事のクリックが少ない
2）商品のクリックが少ない
3）カテゴリ別バナーのクリックが多い

問題点を踏まえ、上図のようにリニューアル改善しました。

1）ニュース記事のクリックが低いことへの改善点
おそらく文字情報が整然と一列に並んでいても、読んでいないのだろうと考え、目に留まりやすく読みやすくなるようフォントサイズを大きくしました。

2)商品のクリックが低いことへの改善点
商品のクリックが一番低かったことから、ニュースと場所を反転させ、ユーザーの目に触れやすい位置に配置しました。さらに、今まで文章＋写真で、説明的だったところを写真のみに限定し詳細情報はクリックしないと分からないようにしました。

3）カテゴリバナーへのクリックが高いことへの改善点
今まで下のほうにあっても、ニュースや商品記事よりもクリック率が高かったということは、ユーザーにとってこの切り口での入り方が分かりやすかったということだと想定しました。
さらにクリック率をアップさせるために四角いボタン形式とし、イベント情報の要素を減らし少し上へ移動させました。

では、実際にアクセスはどのように変化したのでしょうか？
リニューアル後1週間で再度アクセス解析を行いました。

ニュース記事に関して、クリック率はプラス1.3％とリニューアル前とあまり変化がありませんでした。ただフォントサイズを大きくした関係上、掲出している点数が10点程度→3点と減少しているところを考えると、少し点数掲出を多くすればもう少しクリックが見込めるのではないではないか、と想定しています。
また、商品に関しては、クリック率がマイナス17.3％と大きく落ち込みました。ただ、今まで文字情報で占めていたスペースを他のものに活用できる点を考えると、こちらも点数表示をさらに多くすることができさらなるクリック率の改善を行えるのではないでしょうか。
その他、カテゴリ別バナーに関しては、プラス68.4％と大幅にアップしました。ユーザーが求めている情報とマッチングした結果といえるのではないでしょうか。

このように、アクセス解析を基にデザイン上の改善を続けることがアクセスUPに繋がると感じました。
地道ではありますが、レスポンスの把握→改善と、今後も確実な手順を続けるのが
アクセスUPの近道ではないかなと思います。

PCサイトでは、各アイテムの写真を大きく掲載し一覧で見せ、いろいろと初夏のイメージに添ったモチーフを使いデザインします。大きな画面いっぱいに使えるので、ビジュアル的な訴求力も存分に発揮できます。
点数が多ければスクロールしないと次の商品が見えない、なんてこともあるかもしれませんが、そこは見せ方次第で優劣がないようデザインすることも可能です。

一方、モバイルサイトでこのコンテンツを展開したい場合、見せ方はどう違ってくるのでしょうか？
自分なりにこうするとユーザーがわかりやすい、見やすいページになるのでは？という点をまとめてみました。

1.「どうページ構成していくか？」
PCサイトでは、一番に見せたい情報（この場合は商品の写真）を大きく一列に表示することができ、その情報をユーザーは一番初めに受け取るように配置することができます。
画面が広いのも手伝って多くの商品写真を何列にも表示させることができ、また、ユーザーは他の情報も見渡すことができるので一部の商品が飛びぬけて目立つ、というページ構成にはならないように作成できます。
一方、モバイルサイトはこれと違い、矢印キーの下ボタンを押し、下にスクロールして見ていきますので一番初めに開いた画面内でなるべく完結していたり次のページへの誘導が出ているが見やすく、情報に到達しやすいといえます。
さらにモバイルサイトでは、容量制限の問題から、長いページ1ページで全てを見せるということはできません。
このような構造的特徴もあり、モバイルサイトでは情報を細切れに見せ構成し、ページ作成をしていくほうが良いようです。

2.「リンク先に誘導させるような仕掛けを！」
では、今回の特集ページをモバイルでは具体的にどう見せていくと効果的なのでしょうか？
1ページにアイテム写真を全部表示することができないため、一覧ページから各商品の詳細ページにジャンプするよう作成します。
この際その一覧ページが、商品の名前あるいはそのアイテムが売ってるショップの名前が羅列してあるだけだと、そこから各詳細ページへのクリックはあまり期待できないと思います。
そこで、一覧ページにちょっとしたひと工夫。
各詳細ページで表示されるアイテム写真の小さいサムネイルを一覧ページに配置します。
そうすることでユーザーがわかりやすく、さらにクリックが多くなる可能性が高くなります。

3．「回遊性をよくして他の商品も見てもらう」
各アイテムの詳細ページまで見てもらったら、あと少し。他のアイテムもたくさん見てほしい。
そんなときは、写真の下にちょっとしたひと工夫をすることで回遊性がよくなります。
←前へ｜一覧｜次へ→
と、リンクを貼ればこれだけで各ページで回遊してくれる可能性がぐんとアップします。

モバイルサイトは見せたい情報を１ページに全て詰め込むのではなく、
できるだけ情報を最小のサイズで見せてあげる方が操作性が良いようです。
ということは他のページへできるだけわかりやすく間違わないように
誘導させる／到達させるようにページをデザインしていかなくてはならないのだと思います。

と、この他にもまだまだ注意する点や問題点等多くあると思います。
モバイルサイトでそれぞれの目的に沿ったわかりやすい情報提供。
デザイン面で工夫できる点をこれからも改善し、作成していければと思っています。

以前の「文字だらけのサイトをわかりやすく～」でもありましたが、文字だけのサイトの中で、ひとつこのようなアイコン（記号）を用いるとユーザーの目を引き、リンクの箇所だと認識したり、重要な箇所を見逃さないようにしてくれる効果が期待できます。

代表的なのはもちろん、下図のような「矢印マーク」です。
さまざまな用途にオールマイティに活躍でき、しかも多種多様なデザインにすることが可能なので、
どんなデザインのサイトにも合わせることができます。
普段何気なく使っていますが、よくよく見渡してみるととっても“大した”マークなんです。
<矢印マークの一例>

では、ページの作成上でよく使われるのはどんな場面なのでしょうか？
いくつかの事例から、どなたでも導入できる“ちょっとしたコツ”をほんの一部ですがご紹介します。

<ちょっとしたコツ　～矢印マークのススメ～>
■その1
ナビゲーションやサブのナビゲーションなどに。
文字だけを羅列するよりもナビゲーションとしてわかりやすくなり、さらにリンクとして認識されやすくなる効果もあります。

■その2
リストで情報を整理して掲載する際に。
わかりやすさで言えば「矢印マーク」は必要ないかもしれませんが、サイトのデザインを統一したい場合や味気ないページにしたくない場合などに使えます。

■その3
リンク誘導などに。
ボタンなどを用いず、リンク先のページへ誘導させたい・その部分を強調したい場合などに有効です。リンク箇所がどうしても多くなってしまった場合などは、これらとボタンを併用して情報をすっきり見せることもできます。

ご紹介したのは、ほんのちょっとした活用方法ですが、これの有無だけで訴求力に違いがあるのが分かるかと思います。
あまり目立たないけれど、実はなくては困る縁の下の力持ち、、、ではないでしょうか？

このような小さいアイコンは、表現できるスペースが限られていたり、色数を単色にしないとわかりにくいなど制限がありますが、短期間で自作でき、ページ毎のデザインによって変える事もできるので、簡単に導入できます。
クリックが良かった/デザインに調和している/目立たせることに成功した、などの観点からさまざまなパターンを試しデザイン上で工夫していくのも良いのではないでしょうか。

「冬」から「春」への切替のポイントはなんと言っても、
「寒い」季節から「暖かい」季節へ、これをまずイメージしなくてはいけないと思います。
具体的に冬の要素と春の要素を挙げ対比させることで、イメージが思い浮かびやすくなります。
私も季節のコンテンツなどで切替のデザインイメージが思い浮かばないときなどは、この対比を考えます。（意外とすんなりと答えが出てくることも・・・）

色で言えばもちろん「ピンク」に「黄緑」、「イエロー」「水色」など様々な明るい色目を使うと、ひと目で春だと表現できます。
◇冬：白、グレー、黒、青など・・・寒色が多い季節から
◇春：ピンク、黄緑、イエロー、水色など・・・パステルカラーの明るい色の季節へ。
冬から春へは“色”ひとつとってみても、その印象がガラリと変わり「春が来たな～」と感じさせることができます。

モチーフで言えば「花」「蝶」「リーフ」など、ぱっと見で分かりやすいものが多く使える季節でもあります。
◇冬：雪の結晶、星、キラキラなど・・・雪やクリスマスを連想させるものから
◇春：花、蝶、リーフなど・・・植物や虫など芽吹きとともに目にすることが多くなるものへ。
ワンポイントで使いやすく、さらに使える種類が豊富で、使っているだけで楽しくなってしまうようなものが多いのが特徴だと思います。

このほか、文字でも春らしい表現のフォントを選ぶことで一層春らしくなります。
◇冬：しっかりとした安定しているイメージのフォントから、
◇春：軽やかな楽しいイメージのフォントへ。
春らしいフォントはこれ！というのは、使い方や色の組み合わせ方などによって変わってきますので一概には言えませんが、「これは合わないでしょう～」というフォントでも組み合わせ方によっては春らしい季節感が出たりしますので、いろいろと試してみるのもよいかもしれません。

上記は、あくまで春の代表的なイメージとしてあげたものです。
実際にデザインを落とし込む際には、前提としてターゲットを考え、さらに流行などを加味していくことも重要になってきます。

このように、春のイメージひとつ取って見ても、対比したり整理することでイメージが思い浮かべやすくなり、デザインに落とし込む時間が短縮できるのではないでしょうか。
私も実際に、頭では考えられていても結果に落とし込む時間が長くなってしまうときも多々ありますが、よりリピートされるWEBサイトを目指して制作していければと思っています。

CMSやブログタイプの更新システムで館内やお店の情報を更新されている方など、どんな方でも実践できる“ちょっとしたコツ”をほんの一部ですがご紹介します。

<少しの工夫でセール商品の訴求度UP！>
■その1
PCサイト、モバイルサイト、HTMLメルマガなどに効果的です。

全体を赤字にしてしまうと、どれが特別に訴求したい内容かがぼやけてしまいます。
訴求したい箇所のみ赤文字＋太字にして目立たせると読みやすくなり、訴求度をアップさせます。

■その2
テキストメルマガなどに効果的です。

色や背景色、画像が使えないため文字の装飾や、カタカナ→英字に、ひらがな→カタカナになど文章にリズムをつけると目立たせることが出来ます。

■その3
PCサイト、モバイルサイト、HTMLメルマガなどに効果的です。

[SALE]などアイキャッチになるアイコンを作り、特別に目立たせたい商品に貼り付けるなどの方法もあります。

ご紹介したのは、ほんの一部ですが、開催中のクリアランスや次回のバーゲン時などで使ってみてくださればと思います。

これらちょこっとした、本当に少しのコツですがこれらを導入し改善して行くことで、訴求度をアップさせていくことにつながるのだと思います。
そのためには日々の情報収集や見せ方の研究、導入した後の調査＆改善案・・・
デザイン面でいかに工夫して訴求して行くかを常に考えていかなければならないなあと
あらためて感じています。

実際にWEBのデザインや制作をしているうえで、本当にそうだなあと感じることが多々あり、いかにその引き出しを多くその場面で「忘れずに」かつ「効率よく」引き出せるのか、、、
改めて考えてみると“アイディアソース”ってとても重要。。。

アイディアソースの蓄え方として、一番に思いつくのは「本」。
ただデザイン系の書籍は高価なものが多く、本屋で立ち読みするのが精一杯で、雑誌も「どうしても」というもの以外は立ち読みで済ませることが私の場合は多くあります。
社内でも、例えば参考になる催事（母の日やクリスマス）の特集ページがあったらプリントアウトし年間通してファイリングしたり、商業施設に視察に行った際のフロアガイドやチラシ、手配りのDMなどを施設毎にファイリングしています。
それだけでもページ作りの刺激になるのと同時に参考になりますし、
プラスして新しい企画やデザインのアイディアのきっかけになる場合だってあります。
（ファイリングするだけで使われなければ意味がありませんが・・・）

本屋に行って立ち読みしたり、美術館へ行ったり、映画を観たり、チラシやDMをファイリングしたり、
こういったちょっとした積み重ねでずいぶん助けられることが多くあります。

この他にも、手軽に出来るところでたくさんのメルマガを購読したりそこからホームページを
とにかくたくさん「見る」ことだけでもアイディアソースは蓄えられていくのではないのかな、と思います。

最近は昔のように、一枚一枚を切って貼ったりしてスクラップブックを作らなくても、
パソコン上で簡単に管理が行えるようになりました。
特に写真はデジカメで撮って、取り込むだけでデジタルアルバムとして出来上がるのですから
現像代などもかからず便利なものです。
また、ネットで検索すればその情報にすぐ到達できますし、情報の検索だけなので書籍を購入したりする手間もないし、時間の短縮に加え多量の情報に到達できます。

ただ、ネットだけでの情報収集やアイディアソース検索は、WEBの仕事に携わっている身でありながら、やはり限界があると思います。
実際に書籍になっているもの（特にグラフィック関係）や、チラシやDMとして配布されるものというのは、その“実物”がないとピンと来ないしインスピレーションになりにくくはないでしょうか？
これもよく言われている話ですが、
「使い方や種類または質によって、情報を検索する媒体を使い分けなければならない」と、
今さらながら実感しています。

今日、さまざまなものがデジタルになって私達の身の回りに当たり前のようにある、
表現できる媒体がぐっと増えている、ということは・・・？
「私達がアイディアソースとして収集できる情報も大量にあふれている」
ということなのだと思います。
その大量の情報の中から必要なものを必要なだけ切り取らなければならない・・・。
（自分でまとめておきながら）すごく難しいことだと思いますが、
これら情報収集の積み重ねが少しでも良いデザインにつながって行くよう、努めていきたいものです。

まず、商品を撮影するときに考えなければならないポイントを自分なりに整理してみました。

（1）商品のPRポイントを明確にする（集合で撮影する場合はテーマを明確にします）
まずこれが無くては始まりません。
撮影する商品のどこにPRしたいポイントがあるのか明確にしないと、
どこから撮影したらよいのか、全体を撮ったらよいのか、それとも一部だけを撮ればよいのか、
時間がかかるばかりでPRポイントがブレてしまい、結局商品の魅力が伝わりません。
例えば・・・

ある飲食店のメニューを撮影します。その場合、もちろん“料理”がメインなわけですから
左の写真は×です。（お店の雰囲気を撮影する場合はまた別です）
全体を撮るのは重要ですが、右の写真のように一品一品がなるべく大きく写るよう、またメインのお皿がある場合はそのお皿にズームして撮らなくてはPRポイントを写真で伝えることはできないと思います。
あとは、アングルを変え何パターンか撮影し、おいしそうな写真が撮れれば成功です。

また、あるお店のブーツを撮影します。

一見左の写真はうまく撮影できている感じがしますが、写っている部分が一方向からの視点でしかないので、ヒールの高さだったりデザインだったり、実際に履いたときのイメージが想像できません。
右の写真のように横から撮影すれば、商品のディテールも伝わり、実際に履いた時にどういった形になるのかがイメージしやすくなります。
あとはできるだけ商品の特長を引き出して撮影すると、うまくPRする事ができると思います。

（2）商品の写真映えを考慮する（デザインや形、特に色は重要です）
その商品が写真で映えるかどうか、商品自体の意味だけではなく、どう撮影すればその商品が映えるのかを考慮して撮影に望まないといけません。
例えば・・・

立体的なフォルムが出やすいレディースファッションの場合、左の写真のように置いて撮影するのと、右の写真のようにトルソーに着せて撮影した場合と、洋服の印象自体が違うのが分かると思います。
こちらも（1）と同様、実際に着たときにどういった形になるのかをイメージしやすいように撮ると、商品の魅力がさらに伝わりやすくなると思います。
また、色も重要なポイントになります。上の商品のようなイエローなど、写真映えする色を選びたいところですが、白色や黒色の場合、背景と同化してしまったり黒い塊に写ってしまったり・・・意外と白や黒って難しいのです。
そんなときは「なるべく均等に光が当たる場所で撮影（自然光または蛍光灯の下）」したり、「カラーの展開を一緒に撮影」したりすると、キレイに撮影することが出来ると思います。

（3）撮影環境（照明や背景）
（2）でも少しふれましたが、商品を置く場所の照明や背景を考えるのも商品を魅力的に写す重要なポイントです。
白背景が定番ですが、天気が良い日は外での撮影も良いかもしれません。
また、照明の当たり方で商品の色が違ってきてしまう場合もあるので、できるだけその商品本来の色が再現できる撮影環境で撮影することが重要です。

（4）配置（レイアウト）
商品を魅力的に見せるためには、視覚的にも魅力的なレイアウトにすることが望ましいと思います。
例えば・・・

左の写真のように並べて撮ってしまうと、Tシャツが持つカジュアルさが出ず、単調な印象を受けます。
右のように配置を変えて撮影すれば、動きが出、商品が持つ特長を視覚的に訴えやすくなります。

（1）～（4）まではあくまで私の浅い経験値からの見解ですが、
商品を魅力的に撮影するには、やはり一番はその商品自体をよく観察して、その商品のPRポイントを見極めることだと思います。
それが明確に定まってさえいれば、商品を魅力的に撮るための下準備だったり方法がついてくるのではないのかなと思います。
他に考えつくところだと・・・商品を一番良く知っているショップの方にPRポイントを聞くこと。
というか案外これが一番商品を魅力的に撮影できる近道なのかもしれません。

コンピュータ上で使われているアイコンもそのわかりやすい一例です。
フォルダはフォルダ。
テキストファイルは文字が書かれている紙。あるいは鉛筆と紙。
ごみ箱はそのままごみ箱。などなど
ひと目でわかりやすい“アイコン”が並んでいます。これを使い出してからパソコンを様々な人が使えるようになり普及したと言っても過言ではないくらい、ステキなUIです。

これらはもちろん、WEBサイトでも同様のことが言えます。
ちょっとしたアイコンをプラスするだけで、わかりやすくなり目に留まりやすくなるので様々なサイトで様々なデザインのアイコンを見ることができます。
その作り方も千差万別、立体的なものからドットのみで構成されたシンプルなもの、Web2.0風のものまで・・・サイトに合わせて制作されアイコンはそのWEBサイト全体のデザインを表現していて見るだけでデザインの勉強になります。

実際に、コンテンツタイトルに「文字」プラス「ちょっとしたアイコン」を加えるだけで、ぐっと視認性が増しわかりやすくなります。
実際に例を出して説明すると・・・。
↓アイコンを使用せず、タイトルのみでナビゲーションを作成。

↓では次に、タイトル＋アイコンでナビゲーションを作成。

ひと手間加えるだけで、上記のようなナビゲーションに変身します。
このほかにも、携帯サイトの誘導バナーに携帯電話アイコンを加えたり、プレゼントキャンペーンのページにプレゼントマークを付けたり・・・。
ただ、そのコンテンツを表現するアイコンを選んだり作成したりするのは、WEBサイトのデザインにも合わせなければいけないため、実際は時間のかかる作業です。
さらにアイコンは表現できる“枠”が小さい分、できるだけ要素を単純化しなければならないという問題もあります。

アイコンは便利でひと手間かければ導入できる反面、使いすぎると逆にゴチャゴチャ見えてしまったり、サイトのデザインと統一性がなくなってしまったりと、もちろんデメリットもあり、使い時を考えてデザインしなければいけないと思います。
それらをふまえた上で、より使いやすい、わかりやすいWEBサイトを制作していければと考えています。

では、非PCデバイスから見るWEBサイトは、PCから見るのと比べ、どのように異なるのでしょうか。
さらにその場合、デザイナーが考えなければいけない各デバイス別の“ユーザービリティ”とは？
主に非PCデバイスがPCと違う点、「視点距離の違い」と「操作及び入力装置の違い」から、検証していきたいと思います。

１．視点距離の違い
まず考えなければいけないのは“視点距離”です。
PCとユーザーとの視点距離はせいぜい60～70cm。解像度などにより若干異なりますが、文字サイズで言えば標準12～14pxで設定すれば問題なく読める範囲です。
変わって、携帯電話だとどうでしょうか。視点距離はおおよそ20～30cm。画面サイズが大幅に縮小されますが、距離が近くなる分小さい文字でも難なく読めます。拡大機能や表示の切り替えなどを備えた端末もあり、「携帯端末がPCサイト閲覧に適した環境を用意している」と言えます。
また、WiiやPS3を接続するテレビとの視点距離は1.5～2m。大型テレビが多くなっている昨今、3mなんていうところもあるかもしれません。これだけ離れると、いくら拡大機能を備えているとはいえPCサイト標準で作成してしまうと見づらくなります。

ユーザーがどういった画面及び距離で閲覧しているのか把握することは、デザインをする上で大変重要な項目だと考えられます。
具体的に言うと、まず画面サイズが違うので横×高さを各デバイスに沿ったサイズでの作成が求められます。それに伴い、ページ構成もPCサイトでは一般的である3列組み（4列組み）も非PCデバイス向けサイトを作成するうえでは導入しないほうが良い場合もあります。

２．操作および入力装置の違い
PCでの操作は一般的にマウス、入力はキーボード。非PCデバイスの場合はこの装置が異なり、その装置に合わせたページ作成が必要な場合があります。
携帯電話の場合、主に使用するのは「十字キー」＋「決定キー」。あまりに横幅が長いサイトや画像が多量に使われているページなど、小さい画面では閲覧に向かない場合があります。ただ前述の通り、「携帯端末がPCサイト閲覧に適した環境を用意している」ので、携帯電話向けに大幅なデザイン変更は必要がないように思われます。通常だと、その場合は携帯サイトを作成するのが一般的です。
大きく入力装置が異なるのは、Wiiです。ご存知の通り、センサーを利用したWiiリモコンを使用します。空中での操作でポインタ移動が不安定なため、ページ側で対象のリンクやボタンを大きくするなどの配慮が必要になってきます。

このほか、端末毎に操作及び入力装置は違ってきます。
ユーザーが操作をどの装置からどのように行っているのかを考慮した上で、いかにそのサイトを使いやすいサイトデザインに落とし込んでいくか。視点距離は主に視覚的な配慮ですが、ページ送りなど操作性の面でも各デバイス向けサイトを作成する場合は考慮していかなければなりません。

このほかにも、考慮する点は多数あります。
Flashのバージョンが極端に低い、またはFlashを閲覧できない端末があるため、ビジュアル的に見せたいコンテンツがある場合などは静的なページ作成をする必要があります。
また、複数ウィンドウという概念がないブラウザがあり、ポップアップウィンドウなどを使用できない場合がある。そのため全ての情報をわかりやすく伝える為に、情報の整理がPCサイト以上に不可欠である。
などなど。

こういった現状をふまえると、まず今後はアクセス解析を定期的に行っていく中で、非PCデバイス利用者の動向を調査していく必要があると考えられます。その上で、ページに落とし込んでいくまたはモバイルサイトの様にそのデバイス専用サイトを作成するか否か、すぐにでも対応が求められてきているのではないでしょうか。
また、今後増えていく「非PCデバイス」端末自体の動向も調査して行く必要があります。

WEBサイトを制作する上で、「すべてのユーザーがどんな端末からでも、同じ情報を得ることができる」という理想に一歩でも近づく。デザインをしていくには、それが根本にあることが一番重要だと思います。非PCデバイスでも、それは変わりません。
一人でも多くのユーザーにとって「見やすい」「わかりやすい」サイト制作を心がけていきたいと改めて感じています。

弊社サイトは2007年7月にリニューアルしたのですが、その際の与件として以下がありました。
・現行のサイトデザインが3～4年前と古いので、デザインを一新しリニューアルすること。
・男女問わない幅広い層の年代、主に流通系で働いている人をターゲットとすること。
・他IT関連会社と同イメージにならないように、また、ITを想起させるようなイメージから遠ざけること。
これらの与件を整理してとりかかるのですが、「基本の配色」を決めておかないと目的に沿ったサイトデザインに取り掛かれません。
その際に私が良く使うのは、下記のような「配色イメージ」です。

このような配色イメージを設計段階から決めておくことで、コンセプトが明確になり整理されます。
今回のコマースサイトリニューアルは、ライトベージュを採用することで「落ち着き」と「やわらかさ」、少量のブラックを足すことで「引き締め効果」を狙いました。また、ターゲットを考慮し、男性寄り・女性寄りの色はあえて使用せず、かつ、サイトの印象付けを強くするため、他サイトではあまり使われない「新鮮」なイメージを持つイエロー×発色の良いエメラルドグリーンを採用しました。
（・・・・・と、配色のイメージが出来上がってよく見てみると、なんだか弊社の社長のイメージに見えませんか？想定していたわけではないのですが、、、不思議です。）
その他、書体（フォント）はゴシックではなく明朝を用い、固くなりすぎない印象を与えました。また、英字フォントにはゴシックを使い、読みやすくしています。

与件から配色イメージを作成すると、コンセプトの明確化、サイトのイメージが決まるだけではなく、競合他社とも比較しやすくなります。さらに、ターゲット層にピッタリ一致しているのかどうかなど、サイト設計の再確認も行うことができます。

商業施設ではメインターゲットの年齢層が広がってきているように思います。
一口で“色”と言っても、年齢によって表現が変わる場合が多くあります。ビビット系の色を多く使い若々しく、逆に使う配色にブラックを少し足して大人っぽく・・・など。

例えば“ピンク”だけを挙げても、どんなトーン（明度や彩度）なのかによってはユーザーに与える印象はかわってきます。
（1）のビビットなピンクは、“元気さ”や“弾ける”イメージ。また、女性よりは“girls”の単語がよく似合います。
（2）の落ち着いたピンクは、“あでやかさ”や“円熟した”イメージ。深みを持つ赤ワインに近い色です。
（3）の桃色ピンクは、“かわいさ”や“甘さ”のイメージ。ふんわりとした、やわらかいといった素材感も併せ持っています。

もうひとつ、商業施設などのサイトデザインで気をつけるところは、ターゲットに合った配色を行うのはもちろん、ロゴとの調和・CIカラーとの調和、また、発行しているチラシやDM、施設ビジュアルとの連動も考慮に入れる点として挙げられます。
さらに、チラシなどとは違い、モニター上で競合他社サイトと比較できる為、競合との差別化も必要になってきます。

「配色」を重要な要素として再認識し、少しでも「よりよいサイト」「印象に残るサイト」「ターゲットに合致したサイト」・・・・・になるよう努めていきたいものです。

【花】を例に挙げると、現在は栽培方法や保存方法、運送技術の発達により、春に咲く花が冬に売っていたり、夏の花なのに1年中売っていたりと、いわゆる「季節感」というものの境界線がぼやけてしまっているように思います。
それは広告を作る側にも浸透しており、ガーベラといえば春の花ですが、最近では夏や通年広告のモチーフとして使われているのを時々見かけます。
理由はおそらく先にも述べたように、ガーベラが1年中花屋に置かれるようになり本来の季節感が薄れてしまったこと、或いは品種改良を重ねカラフルな新色の花を出せるようになり、それが夏のビビットな印象とマッチすること・・・。ほかにも色をCG加工して、青いガーベラなんてものを作って夏のイメージ訴求に使用したりします。

こういう広告をある人が見れば「ガーベラを夏の広告に使うなんてありえない」になり、ある人が見れば「夏らしい花でいいんじゃない」になる。
要約すると、季節+年代+メディア特性=「ターゲットにマッチした季節表現」ということのようです。

季節感を大胆に使ったサイトとして「赤坂サカス（http://sacas.net/）」は、オープン時の3月には名所でもある「桜」を使い、サイト全体が一面桜色でした。現在（7月）は、施設イメージでもある桜+ピンクは部分的に残しつつ、朝顔＆葉っぱの緑と流れるような曲線を用い「夏」のいきいきとしたイメージになっています。
コンセプトとして掲げている「新たな文化発信地と歴史ある伝統文化の融合」の通り、伝統のある「和」のモチーフをベースとして置きつつも、例えば木々から出ているツタなど非現実的なモチーフや色使いを盛り込み新しさを表現しています。また、配色もいわゆる「ワビ・サビ」とはせず、RGB表現に近い発光しているような配色として、こちらも「時代らしさ」を感じさせます。
この「赤坂サカス」のようにターゲットとしている年代が幅広い施設では、どの年代から見ても「新しさ」を感じさせるような訴求が必要となってくるので、このような表現をしているのだと思います。
伝統的な四季表現を基調としつつも、その時代・年代に合ったイメージを付加していくことが、最近の「季節表現」のポイントではないでしょうか。

季節が変わる度、「今年はこの時期にイエローを使うところが多い」「この商品提案は新しい」などの分析をしてみたり、「モチーフにはこれを使って」「今年はビビットが流行っているから」などと言いながら作ってみたり、、、気付けばあっという間に季節を1周しています。
ターゲットとする時代や年代に合った【季節感】のあるサイト作りを目指して、少しでも来訪者が季節を感じリピートしてくれるよう努めていきたいものです。