Latest thinking
すぐに使えるノウハウではなく、「なぜそうなっているのか」を考える記事を書いています。デザインの仕事で感じるモヤモヤに、構造から向き合いたい人のための場所です。
伝えるための情報デザイン、文章デザイン
私たちは人に何かを伝えたいときに、言葉・絵・音・映像などを駆使して表現します。標識のようにひとつの形式でユニバーサルに伝わることもありますが、そうはいかないことがしばしばあります。このサイトでよく取り上げている「 デザイン [http://www.yasuhisa.com/could/tag/%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3/]」「 マーケティング [http://www.yasuhisa.com/could/tag/%E3%83%9E%E3%83%BC%E3%82%B1%E3%83%86%E3%82%A3%E3%
ブレないワイヤーフレームを作るコツ
すべてのワイヤーフレームは平等ではない 「ワイヤーフレーム制作の５つのアプローチ [http://www.yasuhisa.com/could/article/5-approaches-of-wireframes/] 」で一見同じようにみえるワイヤーフレームにはそれぞれ特徴があり、目的に応じて使い分けた方が良いという話をしました。違うアプローチが幾つもあることは分かりますが、ではどのようなときにどれを使えば良いのでしょうか。選択するためのチェックポイントは４つあります。 ワイヤーフレームを作る目的はなにか作ることで何を達成させたいのかを明確にします制作プロセスのどのフェイズで用いるのか どのタイミングで作るかによってワイヤーフレームが果たさなければならない役割は変わります誰がワイヤーフレームを見るのか クライアントなのか、デザイナーなのか、開発者なのかで異なりますし、彼等のプロジェクトに対する理解度にもよります誰がワイヤーフレームを活用するのか ワイヤーフレームを使ってデザインをするのか、開発を進めるのか、それとも特定のインタラクションを確定させたいのか ワイヤーフレームを作るという
効率よくタグ付けをするツールとサービス
「コンテンツを繋ぎ合わせる理由とメリット [http://www.yasuhisa.com/could/article/create-semantic-contents/] 」で、コンテンツにメタデータを付随することの重要性を解説しました。発行日・更新日・筆者といったデータは CMS から簡単に引き出せますが、コンテンツの文脈を示すタグ (キーワード) をどう記入するかが難しいところです。執筆したコンテンツを全体から捉え、短くて明確なキーワードを考えるのはなかなか難しい作業です。個人サイトであればまだいいですが、一日に複数のコンテンツを配信しなければならない環境だとひとつひとつタグを考える時間はないでしょう。複数人の人がタグの記述に携われば言葉のブレも発生するかもしれません。 そこでコンテンツを解析し、的確なキーワードを提示するサービスの利用が欠かせなくなります。SmartLogic [http://www.smartlogic.com/] や Nstein [http://www.nstein.com/en/] が解析・分析を行っているサービスですが、いずれも大企業向けのソリュー
コンテンツを繋ぎ合わせる理由とメリット
コンテンツに意味をもたせる SEO、アクセシビリティ、ユーザビリティを考慮するのであれば「セマンティック」は忘れてはならない言葉です。しかしながら「セマンティック」という言葉は HTML のようなマークアップのみを指しているのではなく、別の側面もあります。例えばあるページに「デザイン」という言葉があるとします。そこに「CSS」「HTML」「レイアウト」など幾つかのキーワードが付随することで、「デザイン」だけでは捉え難いコンテンツの文脈と範囲を理解することが出来ます。キーワードだけでなく誰が書いているのかといった情報も付随すれば、情報を別の角度から繋ぎ合わせることも考えられます。コンテンツにメタデータがあることで各コンテンツとの関わりが明確になるだけでなく、各コンテンツの意味が深まるのでコンピュータの理解力が増します (つまり SEO 的な効果も考えられます) 。 制作側はコンテンツを載せるためのコンテナ (レイアウト、ナビゲーション、ウィジェットのようなサブエリア) のマークアップを可能な限りセマンティックになるよう整備をしていますが、コンテンツはどうでしょうか。ライティングガイドラ
最近Geek Outしてる？
「Geek」はオタクとか熱中している人という意味ですが、「Geek out」は聞いたことがないという人もいるのではないでしょうか。モノを作ったり何かを伝えたいと思っている人にとって（良い意味でもそうでない意味でも）覚えておきたいフレーズだと思います。 Urban Dictionary [http://www.urbandictionary.com/define.php?term=geek+out] には以下のように書かれています。 > The act of becoming emotionally and physically aroused by the sight or the thought of a technicality of a certain topic of major interest. 自分が興味をもっている何かに対して興奮したりワクワクしたことはありますか？「Helvetica [http://www.amazon.
OmniGraffleを便利に使うあれこれ
制作のためにいろいろなソフトを使っていますが、数年経っても相変わらず使っているもののひとつに OmniGraffle [http://www.omnigroup.com/products/omnigraffle/] があります。ダイアグラムやワイヤーフレームを手軽に作れますが、多機能なので奥が深いソフトのひとつ。以前もOmniGraffleを使ったテンプレート作り [http://www.yasuhisa.com/could/article/omnigraffle-template/] で便利な使い方を幾つか紹介しましたが、今回も最近（やっと）見つけたものも含めて6つ紹介します。 下準備を忘れずに Webサイトのワイヤーフレームを作るのであれば新規文書をそのまま使わず、キャンバスのサイズをきちんと調整しましょう。ディフォルトではルーラの単位がインチになっている場合もあるので、まずはピクセルに切り替えます。グリッドの間隔もインチではなくピクセルにしておくと設計がしやすくなります。OmniGraffleでは、グリッドをオブジェクトに手前に表示させることが出来るので、厳密な設計を好む方は
自社にUX文化を広めるコツ
UX や HCD の勉強をしてみたり、ワークショップに参加しても、会社内での理解を獲得するのが難しい場合があります。装飾より広い範囲でデザインを考えことは時間 (コスト) が必要だけでなく、同僚のデザインプロセスの参加は不可欠です。しかし、成果物として見え難いプロセスですし、「自分はデザイナーではない」と最初から拒否されることもあります。外で入手した様々なデザインアプローチをひとりでいきなり始めても何も変わりませんし負担が大きくなるだけです。UX を社内の文化として取り入れるよう働きかけ、デザインがしやすい環境作りがまず必要になります。 つまり、勉強の次は啓蒙活動です。 社内勉強会をしているところであれば、そこで外で学んできた知識を共有することはできると思います。やっていない企業でも忙しいスケジュールの中から2,3時間ほど共有する時間を絞り出すことは出来るはずです。では、そこで何を話せば良いのか、何に注意しなければならないのでしょうか。 * 制作以外の方にも参加してもらう * UXが何かの解説ではなく、なぜそういった考え方が必要なのか説明する * UXを考慮したデザインプロ
英語モードに切り替えるシンプルな方法
H2O Space [http://h2o-space.com/] は、不定期に少人数の勉強会を開催しています。Webデザインや電子書籍など勉強で取り扱うトピックは多岐にわたっていますが、先週行われた勉強会のトピックは『英会話』。長くアメリカに在住していたという経験と、 Web Directions East [http://east.webdirections.org/] でときどき通訳をしているということで、谷口さん [http://twitter.com/seltzer] から講師として指名を受けました。高校のとき「おまえの英語の成績じゃ留学しても失敗する」と先生に言われるくらい英語の成績がよろしくなかった私ですが、なんとか読み書き話せるようになりました。当時の経験と、帰国後も英会話のスキルを保つため自分が何をしているのかという話をしました。 英語は英語として受け止める 私もたまにありますが「この英語の表現ってなんで言うんだっけ？」なんて思うことがあります（時々記事を書くときに英和で意味を調べることもあります）。その理由として、ひとつひとつの英単語の対訳を覚えているわけではなく
インターフェイスとしてテキストをみたときに考慮すること
サービス、製品の解説するためにマニュアルやスクリーンキャストを作ることがあります。しかし、利用者はのんびり説明に耳を傾ける余裕がないときもあるわけですから、使っているうちに覚えてもらえるようなユーザーインターフェイスを必要とします。Webサイトをはじめ様々なシーンでいえることですが、すべてのアクションはテキストから始まっています。それゆえ、見た目を考える前にテキストでどのように簡潔に説明できるかを模索する必要があります。 例えば Twitter [http://twitter.com/yhassy] をみてみましょう。機能が少ないシンプルなサイトですが、UI 要素をすべて省いてしまうと状況が大きく変貌します。タイムラインを読むことは可能ですが、返信がしたい、設定を変えたいといったアクションを起こすことが出来なくなります。テキストは私たちが何かしたいときの道案内をしているということがテキストを省いてみることで改めて気付かされます。アイコンで補助できる部分はありますが、テキストがないことで意味を大きく失うわけです。 インターフェイスをデザインする際に、考えなければならないことは幾つかあ