Yasuhisa Hasegawa - Yasuhisa Hasegawa (Page 83)

コンテンツを繋ぎ合わせる理由とメリット

コンテンツに意味をもたせる 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文化を広めるコツ

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] から講師として指名を受けました。高校のとき「おまえの英語の成績じゃ留学しても失敗する」と先生に言われるくらい英語の成績がよろしくなかった私ですが、なんとか読み書き話せるようになりました。当時の経験と、帰国後も英会話のスキルを保つため自分が何をしているのかという話をしました。英語は英語として受け止める私もたまにありますが「この英語の表現ってなんで言うんだっけ？」なんて思うことがあります（時々記事を書くときに英和で意味を調べることもあります）。その理由として、ひとつひとつの英単語の対訳を覚えているわけではなく

UI

インターフェイスとしてテキストをみたときに考慮すること

サービス、製品の解説するためにマニュアルやスクリーンキャストを作ることがあります。しかし、利用者はのんびり説明に耳を傾ける余裕がないときもあるわけですから、使っているうちに覚えてもらえるようなユーザーインターフェイスを必要とします。Webサイトをはじめ様々なシーンでいえることですが、すべてのアクションはテキストから始まっています。それゆえ、見た目を考える前にテキストでどのように簡潔に説明できるかを模索する必要があります。例えば Twitter [http://twitter.com/yhassy] をみてみましょう。機能が少ないシンプルなサイトですが、UI 要素をすべて省いてしまうと状況が大きく変貌します。タイムラインを読むことは可能ですが、返信がしたい、設定を変えたいといったアクションを起こすことが出来なくなります。テキストは私たちが何かしたいときの道案内をしているということがテキストを省いてみることで改めて気付かされます。アイコンで補助できる部分はありますが、テキストがないことで意味を大きく失うわけです。インターフェイスをデザインする際に、考えなければならないことは幾つかあ

コンテンツ

Webを活用したマニュアルの役割とは

先週、新宿で開催されたテクニカルコミュニケーションシンポジウム2010 [http://www.jtca.org/symposium/index.html] にて、パネルディスカッションのパネラーとして参加させていただきました。Web技術やデザインに関連する話ではなく、ネット社会のいまとマニュアルのこれからを考えるという内容でした。マニュアル（テクニカルライティング）という世界はあまり詳しくありませんでしたが、出演のオファーをいただいた２ヶ月前から調査・勉強をし、このサイトでも紹介しているような情報を交えて話に加わりました。そもそもマニュアルとは？電子書籍でもハマる問題 [http://www.yasuhisa.com/could/article/metaphor-usability/] ですが、今までのマニュアルの見た目・印象を活かしつつ電子化してしまうと、紙のように見えて紙ではないよく分からないデジタルマニュアルになります。「よりリッチに」ということでインタラクティブなコンテンツが盛り込まれた CD-ROM が同封される場合もあります。しかし、そんな形ではマニュアルの電子化に

アイデア

紙の漫画とは違う電子漫画の可能性

先週、集英社の漫画雑誌「ジャンプSQ.」が iPad アプリとして無料配信 [http://www.itmedia.co.jp/news/articles/1008/17/news061.html]されました。他にも Yahoo!コミック [http://comics.yahoo.co.jp/promo/appli/iphoneos/] や eBookJapan [http://www.ebookjapan.jp/ebj/index.asp] のように漫画をたくさん読める場も日本で増えて来ています。iPad は単行本に比べて少し大きいので見やすいですし、文字数が少なくサイズもあるので、雑誌のレイアウトをそのままスキャンしたようなものに比べて読みやすいです。漫画の電子書籍というジャンルであれば携帯電話が先取りしていますが、スクリーンのサイズと独自のインタラクションを加えることが出来るという点で、iPad をはじめとしたタブレット向けの漫画は雑誌より先に広まりそうです。 iPad くらいの大きさ（もう少し小さくてもいいです）

Webデザイン

組み立てるだけのサイト制作プロセスを変えるヒント

書籍や雑誌をはじめとした印刷物。TVやラジオで見られるような広告。デスクトップで動作するソフトウェア。これらの制作プロセスは Web サイト制作において影響を与えてきてモデル。テクノロジーやノウハウが蓄積され独自性も多少出て来たものの、Webサイト制作プロセスは基本的なところは10年くらい変わらないのではないでしょうか。配布してしまったら終わりの印刷物。一瞬でもインパクトがあればそれで良いテレビCM。企画といっても仕様や機能を決める話になり、始めたら後に戻りにくいウォーターフォール式のソフトウェア開発。いずれのプロセスも長所はありますし、それぞれの形に合っているから使われているわけですが、人と人、情報と情報、そして人と情報が常に双方向に繋がり続けている Web という有機体にはいずれの方法も適していません。流動的に変化を続ける Web だからこそ、アジャイルソフトウェア開発 [http://ja.wikipedia.org/wiki/%E3%82%A2%E3%82%B8%E3%83%A3%E3%82%A4%E3%83%AB%E3%82%BD%E3%83%95%E3%