エスカフラーチェ ブログ

エスカフラーチェのスタッフが日々のニュースや技術・デザインの話をお届けします。RSS フィード

POINT OF VIEW #1 コンセプトからのビジュアルデザイン開発勉強会 開催します

POINT OF VIEW #1

告知が遅くなりましたが、きたる12/7(月)19:00から、POINT OF VIEW #1 コンセプトからのビジュアルデザイン開発勉強会 を開催します。

参加費は無料です。興味のある方は是非ご参加ください!

※勉強会終了後、懇親会(3,500円程度実費)を開催予定です。

POINT OF VIEW #0 デザインプロセス勉強会レポート

去る10/30(金)、POINT OF VIEW #0 デザインプロセス勉強会を開催し、30名の皆様にご参加いただき、以下のようなトピックで進めてまいりました。

概要

デザインの構想から完成まで。
デザイナーがどのような工程を経ているのか?何を大切にしているのか? というようなことを、経験をもとに共有しあい、理解を深めていきます。

勉強会の内容

主に以下のような内容で進行しました。

  1. nanapi のデザインプロセスブログ記事(その1その2)をとりあげ、軽く振り返る
  2. 事前アンケートより、関心が高いトピックについて意見を出し合う

関心の高かったトピック

  • クライアントとのコミュニケーション
  • コンセプトの決め方
  • ユーザー調査・分析・ペルソナシナリオ手法
  • サイト構造の設計
  • ワイヤーフレームの意義と使い方
  • レイアウト設計
  • ビジュアルの起こし方

ディスカッションを振り返って・・・

関心の高かったトピックのうち、「クライアントとのコミュニケーション」「コンセプトの決め方」「ユーザ調査・分析・ペルソナシナリオ手法」の部分について、制作の現場ではどのようにやっているのかということを中心に意見を出し合いました。

クライアントに提案を行う際に「(サイトができたとして)5年後に何をしたいですか?という質問で、本当の目的が見える」(5年後のビジョンの共有)という意見など、自分のやり方以外のお話をいろいろ知ることができて参考になりました。

反省点など

第0回ということで試験的に、手探りにはじめてみましたが、とくに勉強会の進行についてとても学びが多いものでした。当日の進行においては不慣れなためにあまり上手にできず申し訳なく思います。また、メールやTwitterなどでご意見をいただいた方、ありがとうございます。この場を借りてお礼申し上げます!

  • デザイナー・ディレクター・プログラマーといった役割が見えにくいまま幅の広い(どちらかというとディレクション寄り)話題を中心に進めてしまい、結果的にデザイナー視点がぼやけてしまった
  • デザインプロセスの前段階・前提となるコミュニケーションについての話が大きくなってしまい、デザインプロセスになかなか踏み込むことができなかった
  • 30人で座談会のような形式にしたため、人によっては発言をしづらい状況をつくってしまった

次回以降の課題

  • 人数を減らして発言しやすくするか、あらかじめ決めたテーマについてグループワークの上で発表してもらうスタイルにする
  • 発言時に普段の役割が見えやすいように名札もしくはその場で見えるポジションペーパーなどを作成する
  • テーマを広げすぎない ... 次回はもっと狭いテーマで、「ビジュアルデザインの起こし方」にフォーカスする予定です。

ブログ・Twitter でのレポート

当日、ハッシュタグについて何も触れないままホワイトボードに書いていただけなのに活用いただき、ありがとうございます。今後発信の際には活用していきたいと思います!

※レポートの際に、トラックバックでお知らせいただけると嬉しいです。

Twitter APIの417 Expectation Failed対策

オオヒダです。最近Twitterのおもしろさがわかってきました。おそい。
というわけで、今回はTwitter APIを使っていてちょっと気づいたことについて書いてみたいと思います。

TwitterAPIを利用してつぶやきを投稿するとき、"417 Expectation Failed"というレスポンスが返ってきてしまい、投稿を行えないということがたまにありました。
うーんこれは困る・・・ということで、調査してみました。

そもそも417 Expectation Failedとは何か?ということですが、これを理解するには100 Continueというレスポンスについてあわせて知っておく必要があります。

クライアントからサーバに対して大きなリクエストを送る場合、HTTP1.1ではまずそのリクエストが受け入れ可能かどうかをサーバに問い合わせることができます。この際、受け入れ可能であることを示す一時的なレスポンスというのが100 Continueとなります。

ただしサーバによっては100に対応していない場合があり、そのためにクライアントはExcept: 100-continueというヘッダをリクエストに含める必要があります。
そしてサーバが100に対応していないことを示すレスポンスというのが、417 Exceptation Failedとなります。

つまり、Twitterのサーバに対して100を要求しているけど、Twitterのサーバがそれに対応していないため、417が返ってきているのだ!ということが、なんとなくわかりました。

そこで解決策としては、リクエストから該当のヘッダ(Except: 100-continue)を消してみればいいのでは、ということになります。
通信の実装方法によって制御の方法も様々かと思いますが、ここではtubuclipで利用しているtwitteroauthというPHP用のライブラリの場合で考えてみます。

twitteroauthでは、実際の通信部分にはcurl(cURLモジュール)が用いられていす。
curlでは、リクエストボディの長さが1024バイトを超える場合、自動的に100-continueが送信されるようです。100-continueを送信しないようにするには、curl_setopt()関数でExpectヘッダを抑制します。
→ curl_setopt($ch, CURLOPT_HTTPHEADER, array('Expect:'));

今回は以下のようにソースコードに1行追加しました。

twitteroauth/twitterOAuth.php

function http($url, $post_data = null) {/*{{{*/
  $ch = curl_init();
  if (defined("CURL_CA_BUNDLE_PATH")) curl_setopt($ch, CURLOPT_CAINFO, CURL_CA_BUNDLE_PATH);
  curl_setopt($ch, CURLOPT_URL, $url);
  curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 30);
  curl_setopt($ch, CURLOPT_TIMEOUT, 30);
  curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
+ curl_setopt($ch, CURLOPT_HTTPHEADER, array('Expect:'));

とりあえずこのようにしてから、問題の現象が生じることがなくなりました。めでたしめでたし。

※今回はTwitter用ライブラリに対しての修正なので問題ありませんが、curl設定の影響範囲については注意が必要です。

ちなみに、なぜ現象が毎回でなくたまに生じていたのかということですが、これは文字列の長さが原因だと思われます。
上述の通り、curlでPOSTを行う際、ポスト内容が1,024文字を超えると100-continueを利用しようとします。ですので、つぶやきの文字数が長い場合に、curlが100をつけて送信、結果として417が返ってくる という流れになっていたものと考えられます。
(つぶやき自体は140文字までと短いですが、APIを扱うための情報やエンコードされたつぶやきの文字数を合わせると実際のポスト内容はけっこう長くなります)

というわけでTwitter APIで417レスポンスが返ってきてしまう場合の対応方法についてのメモでした。なお、この問題は2008年12月のTwitterサーバ仕様変更時から発生している可能性がありますので、いまさらなネタかも知れません。
以前書くと言っていたtubuclipにまつわる話についてはまた次回書きたいと思います。

参考:
[Studying HTTP] HTTP Status Code - 100 Continue
http://www.studyinghttp.net/status_code#Code100

デザインプロセスについての勉強会を開催します!

povcc_banner.png

少し前にnanapiのデザインプロセス その1その2と書いた際に勉強会をやってみたいと募ったところ反響をいただき、少しずつ準備をすすめていましたがようやく告知できるようになりました。
すでに参加したいとおっしゃっていただいた方、お待たせしてすみません!

せっかくなので単発の勉強会という感じではなく、これをきっかけに月1回くらいのペースで開催できたらいいなと考えていました。

そこで今回、POINT OF VIEWという企画を立ち上げることにしました。Web制作やサービス開発などについて、デザイナーの視点から考え、 学んでいくことを目的として、勉強会やイベントなどを開催したいと考えています。

というわけで「POINT OF VIEW #0 デザインプロセス」としてデザインプロセスについての勉強会を行いたいと思います。デザイン制作のプロセスをテーマとし、考え方や仕事の進め方などの情報交換をする勉強会になります。楽しくて役に立つ勉強会にできたらと思っています。

もしご興味がありましたら、POINT OF VIEWのサイトから参加お申し込みしていただけますので是非どうぞ!詳細もこちらに記載しています。

今まで個人的に、デザインプロセスについて話をしたり聞いたりする機会があまりなかったので、とても楽しみにしています!よろしければ、ぜひご一緒に勉強しましょう。

勉強会のお申し込み・お問い合わせはお気軽にどうぞ!

「つぶくりっぷ」をリリースしました

オオヒダです。

本日「つぶくりっぷ」というTwitter関連のアプリケーションをリリースしました。
http://tubuclip.com/
tubuclip_ss.png

個人でリリースしたものなのですが、僕のブログが今ちょっとみれないのと、会社で開発しているサービスの実験をかねてつくったものということもあり、こちらで書かせてもらっています。

サービスの概要としてはとてもシンプルで、TwitterのつぶやきからURLが含まれているものを抽出して表示するというものになっています。

企画的にはシンプルというかワンアイデアものなのですが、今回は開発に際して次のようなことを試しています。

  1. RackSpace Cloudという海外のクラウドサーバを使ってみる
    →使用中
    1. Twitter Streaming APIを使ってみる
      →実装済み
    2. PHPでデーモンをつくってみる
      →実装済み (/etc/init.d/tubustream start)
    3. リアルタイムっぽいUIをつくってみる
      →実装済み
      →できたもの ストリーム
  2. pound x lighttpd x memcached な構成にしてみる
    →稼働中
  3. TwitterのOAuth認証をつかってみる
    →実装済み
  4. PHPのcurl_multi_*関数というのをためしてみる
    →実装済み
  5. Ajaxのインジケータをかわいくしたい(ぐるぐるはあきたから)
    →実装済み(各所ででてくるとり)
  6. CSS Spritesをやってみる
    →実装済み

今回はいろいろ自分としてははじめてなことをやってみたので、大変な部分もありましたが勉強になりました。
やっぱり新しいことをやってる時がプログラムをかいてて一番楽しい気がします。長時間やってうまくいかないとムカーッとなりますけど・・・

とまぁ、これだけ書いても仕方ないので、それぞれの項目について、またくわしく書いてみたいと思います。
あ、あとよかったら使ってみてください。

nanapiのデザインプロセス(その2)

9/1にロケットスタートからリリースされたサイト「nanapi [ナナピ] - みんなで作る暮らしのレシピ -」でのサイトデザインを担当させていただきました。
前回の記事に続き、サイトデザインが生まれる過程(デザインカンプができあがるまでの試行錯誤)を振り返ってみたいと思います。

nanapi

私がデザインをご依頼いただいたときに踏むデザインプロセス

  1. 目的を明確にし、戦略を決める
  2. 要件定義を行い、サイトの構造を決める
  3. ページの骨格を決めたり、ページの中で見せたい情報に優先順位をつけたりする
  4. 見た目の表現を形にする

大枠に考えるとこのようなフローでデザインを行います。プロトタイプを作ってから問題点を見つけてブラッシュアップをする場合は2〜5をいったりきたりすることも多いです。

また、そのときのコンディションによって順序が入れ替わることもあります。

デザインプロセス(その1)でやってきたことを振り返ると、まだ1.の段階というわけで、入り口にようやくたったというところでした。

※nanapi ではロケットスタートさんが考えていらっしゃる中期的・長期的戦略があるのですが、まずはリリース後>集客に成功するというフェーズでのデザインに絞って書いています。

Step2〜3:要件定義を行い、サイトの構造を決め、ページの骨格を決める

要件定義

コンセプトが固まった・リリース当初のゴールが決まった・・
次にすることは、要件定義です。

要件定義の目的は、あいまいだった依頼を明確にして、概算で見積していたところを明確にすることだと考えています。

いつまでに誰がどのような成果物を納品しなければならないかはっきりさせないことには、何をもって納品なのかがわからなくなってしまいます。

サイトの構造を決める

幸いなことに、ロケットスタートのけんすうこと古川健介さん(以下、けんすうさん)がページごとに大枠のワイヤーフレームを作ってくださっているのでサイト全体の構造を決めるのにとても助かりました。

サイト全体でどのような機能・ページが必要なのか、ということをすりあわせる過程です。

けんすうさんの場合デザイン・プログラム・サービス運営といった一通りの工程を自身で経験されているため、ユーザーが実際に利用するフローがイメージできていました。そのため必要なページのリストアップにぶれることなく全体像が浮かび上がっています。

ページの骨格決めとワイヤーフレーム

ワイヤーフレームといえば先日の CSS Nite LP7 IA(情報アーキテクチャ)特集を中心に話題になっていました。

せっかくなのでここでのワイヤーフレームの意味について触れておきます。

けんすうさんはワイヤーフレームを作る際、それ自体は参考資料というか、ページで表示させたい要素を盛り込むものという位置づけで作ってくださっていて、必ずしもその通りに作ってください的オーダー見本ではないと思っていただいてました。

つまりここから私がやるべきことは、ワイヤーフレームに書いてあることを美しく再現することではありません

ワイヤーフレームをよく観察して、目的により合致した画面の設計(情報の重要度・適切な表記のしかた・情報の見せ方)を提案し、形にしていくことだと思っています。

トップページワイヤーフレーム

▲トップページのワイヤーフレーム

Step4 見た目の表現を形にする

おそらく、この工程はデザイン工程の中でもかなり悶々とする時間が長いところだと思っています。

実際にnanapiを制作した時には、Step4をやりながらStep3を考えるような感じですすめていったので、左脳(目的や理由がはっきりした設計を考える)・右脳(心地よさなど感情に訴えかける見せ方を目指す)がフル稼働し、脳みそがたっぷり汗をかいたような気がしています。

キーワードを抽出し、似合うテイストを決めることからスタート

グラフィックのデザインあるいはコミュニケーションのデザインは、情報の視覚化ともいえる作業なので、まずはサイトのイメージに近いキーワードを出しました。

  • かわいい
  • 親しみやすい
  • 手軽
  • 主婦
  • 女性的
  • やわらかい
  • かっこよすぎない
  • 上品すぎない
  • かんたん
  • 役に立つ

などなど。

そして、それらのキーワードに近いモチーフやカラーリングの例として、近そうなサイト・近そうな素材をピックアップして、これで方向性にずれがないか、けんすうさんにチェックしてもらいました。

イメージにあった素材

▲イメージにあいそうな素材

最初に出したトップページラフショット

ラフを作るときに手描きするときもありますが、今回はスピードを優先し Fireworks を使ってラフ作りを始めました。

そしてここからは1人作業、けんすうさんにアウトプットするまでは本当に自分自身との戦いがはじまります。

最初のラフショット

▲ラフ段階なのでガイドラインがあっていなかったり、余分な画像が写りこんでいたりもします。フィニッシュまでは細かいところは後回しにします。

まず、7つのカテゴリを色分けし、それぞれのカテゴリごとのゴール(**できる)を訴求するようなトップページの案をつくりました。

メニューの並び方やラベリングなどもこの時点ではワイヤーフレームをもとにして大きくはかわらず、主にテイストあわせを目的とした作業です。

普段デザインラフをつくるとき、色情報にひっぱられないようにあえてグレースケールにして作業をすることが多いのですが、今回の場合はセブンリッチ(7つの問題)というコンセプトを重要なものと位置づけるため、またカラフルでかわいらしい印象を与えるためカテゴリに色情報を持たせることにしました。

しかし、カテゴリーに色情報を持たせるにはいくつか欠点があることを想定していました。

カテゴリに色情報を持たせる欠点
  • 一度決めたら簡単に変更できない(将来的にカテゴリ名や分け方を変更したくなったとき、あるいはカテゴリそのものを撤廃したくなった時の対応にコストがかかる)
  • そもそも色に意味を持たせること自体アクセシビリティ上好ましくない(ただ、今回の場合はテーマカラー程度の意味でしかないので、カテゴリのラベリングなしで色が使われるわけではないから良し、という見方もできます)

スタートアップ時にコンセプトやかわいらしさを伝えることを重要と位置づけていたため、このような欠点がありながらもカテゴリーに色を持たせることを決めました。

トップページラフ、その後の変遷

すべての過程のキャプチャを並べてしまうと限りなく長い記事になってしまうので(すでに長いですが)、大きく変わったタイミングだけを掲載します。

メニューバーに色をつける

▲試しにメニューに黄緑色をあててみて印象を確認してみたときのキャプチャ。

グローバルメニュー以外はほぼ現状に近づいた

▲グローバルメニュー以外はほぼ現状に近づいたときのキャプチャ。この間にロゴの制作を並行しておこないましたが、ロゴ作りのプロセスを書いたらまた記事がさらに長くなるので割愛。もし興味がありましたら勉強会などでお話させていただけたらと思っています。

苦労したのはグローバルナビゲーションの設計

このような感じでほぼ現状に近づいてきましたが、自分が利用者になったときのことをイメージすると、どうしてもグローバルナビゲーションの導線が自分の欲求とあわない気がしていました。

また、一部の女性テスターの方々に、メニューが黒いせいか重たい印象という意見をいただいていたこともあり、ナビゲーションの設計だけでなく見た目の面でも改良しなければ私自身も納得がいきませんでした。

nanapi の設計には2つの視点が必要

nanapiは生活に役立つライフレシピのサイトですから、読み手にとって読みたいコンテンツがたくさん並んでいてほしいですし、役立ちそうな印象を与えなければなりません。

それと同時に素晴らしい書き手の人がどんどん現れて、たくさん書いてもらえる仕掛けが必要になります。

どっちも同じくらい大切なことです。
記事を書いてくれる人がいなかったらつまらなくなってしまう→読み手にとっても有益でなくなる。
逆にいくら素晴らしい書き手の記事があっても、読み手にとって魅力的にみえてなければ使いたいと思わない。

最初はファンを増やしやすい見せ方が良いかもという仮説

そこで、スタートアップの時期ははファンを増やしやすい見せ方が良いかもという仮説をたて、導線を多少犠牲にしてでも、全体の印象が良くなることを優先することにしました。

このようにしてグローバルメニューをカテゴリーへの導線にし、カテゴリカラーでカラフルに彩るナビゲーションに変更しました。

そして忘れてはならないのは、いくら印象が良くても、最初は人力の営業努力が欠かせないということです。
リリース後、Twitter を中心にロケットスタートのお二人が懸命に努力していらっしゃったのを見て、ますますお二人のnanapiへの愛情や本気さが伝わってきた気がします。

おわりに

私は好きがこうじて、独学でひたすらデザインの勉強をやってきてこの業界にとびこんでしまった人です。デザインの勉強をしてきたときに、あまりこうしたプロセスを具体的に紹介しているところが少なくて自分なりに苦労したりもしました。

弊社の代表、大日田はデザイン思考が身についた開発者だったので、そういう面ではとてもよい刺激を受けていたのですが、具体的な受託制作の進め方などというものに関しては、正直に言って2人とも勝手がわからないところだらけでした。
私たちに仕事を依頼してくださるお客様に対して、自分たちの力をできるだけ発揮したい。そのためにはどうしたら良いのかということを軸に、試行錯誤で色々とやってきて今のようなかたちになってきているという感じです。
他のプロの方からみたらおかしなところもたくさんあるかもしれません。もちろん、まだまだ改善できる点はたくさんあると思っています。デザインの仕事は、お客様と一緒につくりあげる仕事だと考えています。ご一緒にお仕事をさせていただく中で、より良いかたちを共につくりあげていけたらと考えています。

エスカフラーチェでは、お客様のビジネスを成功に導く手段のひとつとしてデザインを特に重要なものと位置づけています。

デザインの面白いところは、美しいだけでもだめ、教科書的に使いやすいだけでも差別化にならない。それらを超えて、人の感情に訴えかける力が必要とされているところだと思います。
これからもデザインによって人の生活がもっと豊かになるようなお手伝いができたら嬉しいです。

P.S. 制作者の皆様へ:制作プロセスについての勉強会やりたいです!もしご興味がありましたらpurprin@escafrace.co.jpTwitter / purprin宛、もしくはエスカフラーチェのお問い合わせフォームからご連絡ください。

nanapiのデザインプロセス(その1)

9/1にロケットスタートからリリースされたサイト「nanapi [ナナピ] - みんなで作る暮らしのレシピ -」でのサイトデザインを担当させていただきました。
制作過程みたいなものを書いてみたいと思います。

ロケットスタートに全力投球を誓った、けんすうさんからのご依頼

ある日、ロケットスタートの社長、けんすうこと古川健介さん(以下、けんすうさん)から

:HOWTOサイトをつくりたいからデザインを依頼したい!

ということで早速じっくりとお話を伺うことにしました。

ベンチャーだからこそできる!?合宿的制作スタイル

以前けんすうさんと一緒にお仕事させていただいたときに双方にとってよかったことがあります。

それは、デザインカンプができあがるまでのプロセスの段階で、短期間ながらじっくり直接やりとりする時間をつくる、ということでした。

宿泊こそ伴わないものの、合宿に似たようなスタイルです。
長い時間をかけるので一見コストがかかるようにも見えますが、直接やりとりすることで得られる情報量は多く、行き違いが少なくて結果的にスピードアップできるとお互い(以前お仕事したときに)感じていて、今回もそのようなスタイルで取り組むことにしました。

ちなみに通常の制作スタイルだと・・1回の打ち合わせ(長くても2時間くらい)でお客様の要望を最大限に吸収して、潜在的に何を求めているのかをじっくりと考えて…その後メールや電話でのやりとり、ということが多いのですが、合宿的スタイルではメールや電話によるタイムラグも発生せず、短期間に成果を出すときに効果的だと思っています。

最初のヒアリングのメモ書き

Howtoサイトをつくりたい、ということでけんすうさんが考えていることを聞き出しメモにとりました。

▲最近、サイト制作の前にヒアリングをする際には、自分の手になじむアナログなやりかたでメモをとって、イメージを忘れないように気をつけています。
個人的にはマインドマップ的にかいておくと、全体像を忘れにくいと思っています(クリックで拡大)

コンセプトをはっきりさせるまでの道のり

デザインをご依頼いただいたとはいえ、見た目をどうのこうのというだけでなくそもそもどうあるべきかというところからアドバイスが欲しいということでした。
そもそも私がデザインを考えるときにどうしても根本的な目的とか、何をもってゴールなのか、というのを明確にしておかないと良いデザインは生み出せないですから、最初の段階の話し合いにはかなりの時間をかけました。

けんすうさんが最初に考えていたイメージ

▲ワイヤーフレーム案(クリックで拡大)

この画像はヒアリングの時点で、けんすうさんが持ってきてくださったワイヤーフレーム案です。「家電量販店で一番お得にポイントを使う方法」といった、今のnanapiにもありそうなネタをタイトルに置くなど、やりたいイメージというのが伝わってくるワイヤーフレームでした。
コミュニティの運営について多くの実績をもっているけんすうさんだからこそ出てくるアイデアが詰まっています。(今のnanapiのレベルシステムの原型とか、評価システムの原型がちゃんともりこまれているのがわかります)

サイトリリース時点でどうあるべきか、をはっきりさせる

具体的にデザインに落とし込むには、「サイトリリース時点でどうあるべきか」をはっきりさせる必要があります。

売上やPVは指標としてとてもわかりやすいですが、リリース時点ではまず

  • 多くの人にサイトを知ってもらう(具体的な数値はここでは割愛します)
  • 書き手にとってよい体験を与える
  • 書き手にとって書きやすいUIにする
  • 読み手にとって有益な情報を与える
  • 読み手にとって「やってみたい情報がたくさんあるね」「使えそうだね」というイメージを与える

といったような目標を定めました。

ロケットスタートのお2人が心から楽しく取り組める事業であってほしい

私としては、せっかく同じベンチャーで新しいサイトを立ち上げる以上、何よりロケットスタートのお2人が心から楽しくとりくめる事業であってほしいという思いがありました。

けんすうさんが今までに作ってきたサービスの共通点は、どれもギスギスしていなくてほんわかしていると思っていたので、けんすうさんの良さをサイトに取り込むのはサイトにとっても大変メリットが大きいと考え、女性向けに絞ってみせていくのはどうかと提案してみました。

「ライフレシピ」という概念

そこで考えたのが「ライフレシピ」という概念です。
Howto記事といえばブックマークサイトでも多く人気にあがってきたり、何かと効率の良いやり方はライフハックとも呼ばれて多くの人の注目を集めていますが、もっと女性にも親しみやすい呼び方を考えたときに、お料理のレシピのごとく、よりよい生活のやり方(ライフレシピ)というのがしっくりくると思ったのです。

ということで早速トップページでどういう見せ方をするかブレスト

生活を良くするというアプローチでは、そもそも現状に満足していたり問題だと認識していない場合にとても届きにくいものになってしまいます。
どんな見せ方をするにしても、結果的に多くの人に読みたいと思ってもらえる仕掛けが必要です。

2種類の見せ方

1.問題提起を行う見せ方

このままじゃまずい、という気にさせ、必要にせまられて問題の解決策を読むという行動に導く見せ方

2.解決したときの自分をイメージできる見せ方

こうなりたい、という気にさせ、そのための方法が書いてあるから読むという行動に導く見せ方

このように大きく分けて2つの見せ方があるという仮説をつくり、問題提起型の一つの例をプロジェクトメンバー(けんすうさん・wadapさん・私)で考えました。

▲問題提起で見せるイメージのラフスケッチ(クリックで拡大)

すると・・・
モテない・ドケチ・・などといったネガティブワードが混在してきて、3人共に

「なんかちがうなー・・・」

ということで仕切り直し。

nanapiの原型が生まれる

最終的にけんすうさんが「セブンリッチ・すべての問題は7つにしぼる」と言いだしたのをきっかけに、ななつ・・語感がいいから「ナナピ!」というノリで、nanapiという名前が生まれました。
7つの問題をあてはめることで、7つのカテゴリーも生まれたわけです。

▲nanapiのラフスケッチ。現状と少し違いますが、ずいぶん近づいてきました。(クリックで拡大)

nanapiのデザインプロセス(その2)に続きます。

第4回アックゼロヨン・アワードの審査をおこないました

ご報告が遅れましたが、今回私が審査員を務めさせていただきました、第4回アックゼロヨン・アワード審査結果が発表されました。

「アックゼロヨン・アワード」は、年齢や性別、障害の有無、ITリテラシの高低に関わらず、誰にとっても使いやすいウェブサイトを表彰するものです。

特定の環境で情報が伝わりにくい・情報が整理されていなくてどこに何があるかがわからない・・というようなウェブサイトでは使いやすいものとは言えません。そんな中でこのアワードでは情報をより多くの人に伝えるということに大変配慮されたサイトが多く、審査を通して私自身の学びにもなりました。

私が特にいいなと思ったサイト

  • フルFlashのサイトだとしてもプラグインのない環境の人に正しく情報が伝わる
  • キーボードだけでもサイトが操作できる
  • 目的にあったビジュアル表現がされている
  • 重要な情報とそうでない情報にきちんとメリハリがついている
  • 多くのユーザにとって使いたい機能が使いやすい位置に配置されている
  • サイト内で出てくる文言にも気配りがなされている

コストを考えると、配慮する点が増えるほどかさんでしまうのかもしれませんが、細かいところに気配りをされたサイトに出会うと、あたかも優しい人に応対してもらっているような心地よさすら感じます。

媒体がたまたまウェブサイトというだけで、見る人のために「伝える」ということは通常の営業活動と何も変わらないので、これからの制作活動にもますます取り入れていこうと思いました。

じゃがまるくん

じゃがまるくん

Web Designing 2009年8月号 特集:CSS特集に執筆参加しました

雑誌「Web Designing 8月号」にて、「Ajaxデザイン自由自在」特集の執筆・サンプル制作に参加させていただきました。

特集1:Ajaxデザイン自由自在
−マイデザインを実現するための20のAjaxをセレクト—

画像表示やタブメニューにAjaxライブラリを利用してみたけれど‥‥外観のデザイン方法がさっぱりわからない! 導入するWebサイトとミスマッチな、デフォルトのデザインでは我慢できない!

そういう読者のための特集を作りました。
ここで挙げた20点は、自分なりのAjaxデザインを実現するサンプルと解説です。HTMLや画像の変更、CSSの指定などを駆使して、マイデザインに挑戦してください。もちろん、サンプルはWebサイトからダウンロード提供しています。

タイトルはAjaxデザイン〜・・・ですが、主にjQueryなどJavaScriptライブラリのご紹介とそのサンプルという構成になっています。
今回のライブラリ群は、「デザインカスタマイズがしやすい」という観点で、JavaScriptに詳しい古籏さんがチョイスしたものです(jQueryのほかにも、Yahoo UI Librarymoo toolsを利用したサンプルもあります)。

個人的に、動作と見た目とHTMLが分離できているライブラリというのはとても使いやすい、カスタマイズしやすい!と感じます(私の場合、そうでないライブラリだと使うのを躊躇してしまうくらいです)

jQueryはデザイナーに優しいと言われますが、確かに動作と見た目とHTMLがきれいに分離されているものが多くて扱いやすく、これも急速に普及した理由のひとつだと思います。

というわけで、興味のある方は是非お手にとってみてください!

※最新号発売期間のみ閲覧可能なURLですが、こちらでサンプル一覧をご覧いただくことができます