レイアウトのパターン – イディア：情報デザインと情報アーキテクチャ
グラフィックデザインやWebデザインでよく用いられるレイアウトのパターンについてまとめた。 分割 面を分割して要素を配置する。同格を表現するのに便利。 二等分割 上下や左右で等分する。両方の要素が拮抗することでバランスや緊張感を生む。 二等分割の例 三等分割 上下や左右で三等分する。二等分割よりも緊張感が軽くなる。3つを同格に扱うことも、1：2で扱うこともできる。 三等分割の例 四等分割 上下、左右に等分する。三等分割よりもさらにシステマティックな印象になる。4つを同格に扱うことも、2：2や1：3で扱うこともできる。 四等分割の例 黄金分割 黄金比（1：1.618）で分割する。安定感や心地よさに優れる。 黄金分割の例 対称と軸 点や線を基準として要素を配置する。中心点や基準線が視線を誘導する。 線対称 シンメトリーのレイアウト。安定感があり、誘目性も高い。シンメトリー（対称）の中にアシンメ
認知限界 – イディア：情報デザインと情報アーキテクチャ
一人の人間が情報を正しく認知したり適切に処理できる能力には限界がある。この限界を理解し、超える方法を模索することで、うまく情報とつきあう方法が見えてくる。 情報爆発と認知限界 PCやインターネットの低価格化や普及に伴い、情報の複製、拡散、保管に必要なコストが減少し、情報の爆発が起こった。これにより、手に入れることができる情報量は膨大になった。同時に、情報の非対称性の崩壊も起こり、意思決定に利用できる情報はより複雑になった。 洪水のように降り注いでくる情報を上手く処理できていない感覚を多くの人が持っていると思われる。これは、ある程度は「慣れ」や「ツール」で解消できる部分もあるが、限界がある。これ以上はどうしようもない、というレベルの量の情報に曝される機会は今後ますます増えることが予想される。 認知限界とは 認知限界とは、人間の認知能力や情報処理能力の限界のことをいう。もともとは組織論において
ナレッジファンネル – イディア：情報デザインと情報アーキテクチャ
ナレッジファンネルは知識作成の一般的なモデルである。ビジネスや労働を考える際以外にも、問題解決に役立つ場面は多い。 ナレッジファンネルとは 「ナレッジファンネル」＝「Knowledge Funnel」。日本語では知識の漏斗（ちしきのじょうご）。ロジャー・マーティン（経営思想家・カナダ）が提唱。知識は流れを持って移動し、それに伴い仕事の形も変化していく。その収束する様を漏斗になぞらえている。 ミステリアス（Mysterious） ヒューリスティック（Heuristic） アルゴリズム（Algorithm） ナレッジファンネルの第4段階 アルゴリズムの後に「コード（Code）」を置く場合もある。 ミステリアス（Mysterious） ヒューリスティック（Heuristic） アルゴリズム（Algorithm） コード（Code） 各段階の説明 ミステリアス（Mysterious） 神秘的。体系
スキューモーフィズム – イディア：情報デザインと情報アーキテクチャ
実物に似た外観や質感の再現を目指したデザイン手法である「スキューモーフィズム」についてまとめた。さらにフラットデザインと比較することで、今後のスキューモーフィズムについて考えた。 スキューモーフィズムとは スキューモーフィズム（skeuomorphism）とは、別の素材に似せるためにデザインや装飾を行うことである。近年では主に、コンピューターシステムのUI（ユーザーインターフェース）において、実物に似た外観や質感の再現を目指したデザイン手法を指す。 skeuomorph（スキューモーフ）＋ism（状態、行為、主義など）＝skeuomorphism（名詞） skeuomorph（スキューモーフ）＋ic（〜に関する）＝skeuomorphic（形容詞） スキューモーフと重なる概念 メタファー 暗喩、類推させること。 ミメーシス 真似る事、似せる事。自然の模倣、価値のある物の模倣。 アーキタイプ
連続するリストを横並びに等分表示する方法 – イディア：情報デザインと情報アーキテクチャ
ECサイトの「商品一覧」や会社サイトの「お知らせ」などでは、連続する同格の情報をHTMLのリストアイテム要素を用いてマークアップし、横並びで表示させることが多い。固定幅での表示では厳密な計算によって美しく並べることができたが、レスポンシブなWebサイトのように画面幅が変化する環境では等分表示することは容易ではない。CSS3の疑似クラスを用いて、横並びさせたリストアイテムを美しく等分表示する方法のひとつを紹介する。なお、「連続するリストを横並びに等分表示する方法2」のほうがより簡単です。 前提となるHTMLとCSS HTML 次のようなHTMLでマークアップした「商品一覧リスト」について考える。 <html> <head> <title>商品一覧リスト</title> </head> <body> <h1>商品一覧リスト</h1> <div id="item-list"> <ul> <li>
WordPressでデータベースを構築する – イディア：情報デザインと情報アーキテクチャ
人気のCMS「WordPress」を使って小規模〜中規模のデータベースを構築する際に知っておきたいことをまとめた。 データベースとは データベースとは「特定のテーマに沿ったデータを集めて管理し、容易に検索や抽出などの再利用をできるようにしたもの」をいう。狭義にはコンピューター上で操作できるものを指す。 データベースが用いられる場面 住所録 医療カルテ OPAC（オンライン蔵書目録） ポータルサイト ECサイト など データベースの要件 データの追加、削除、編集が簡単であること データの検索、抽出が簡単で、かつその検索方法、抽出方法が多様であること データのバックアップや復元、出力などが簡単であること データ型の編集が簡単であること 全体像の把握が簡単であること 多人数での閲覧、編集が可能であり、一方で閲覧、編集に制限がかけられること データベースのデータ構造の種類 階層型 データをツリー型
アンカリング – イディア：情報デザインと情報アーキテクチャ
アンカリングは「認知バイアス」のひとつである。情報認識や意思決定において、既知の、あるいは限定された特定の情報の影響を受ける傾向を指す。アンカーは英語で「錨」の意。新たな情報を認識する際、特定の情報の存在が、新たな情報を特定の情報寄りにつなぎ止める「錨」の役割を果たす。「係留効果」ともいう。 認知バイアスとは 観察者効果の一つ。観察者がすでに持っている情報などが情報の認識に影響を与えることをいう。認知バイアスは、人の判断や意思決定が合理的に行われていない場合があることで示された。直感、先入観、思い込み、偏見などの原因となっている。 cf.ヒューリスティック 様々なアンカリング その時点で手に入る情報 これまでの知識や経験を基に、新たな情報の性質を推測する 最初の情報 最初に接した情報や、その情報に現れた特徴を極端に重視する 偏った情報 全体を俯瞰することなく、特定の視点のみで情報を判断する
再利用できる文書の書き方 – イディア：情報デザインと情報アーキテクチャ
「伝わりやすさ」と「視覚的な見やすさ」、さらに「再利用性」を考慮した文書を書く際に気をつけるべきポイントについてまとめた。随時編集予定。 再利用性のある文書の必要性 2014年に勧告が予定されているHTML5では、よりセマンティックなHTMLのマークアップが可能となっている。それに伴い、HTML4やXHTMLで書かれた文書の再マークアップが期待されている。しかし、Web上に公開されている多くのHTML文書では、文書の構造や表記の方法に問題があり、システマチックに再マークアップすることが難しい。 一方、Webで公開される文書はいわゆる「ホームページ」の形だけではなく、RSSやSNS、ニュースサイトを通じて複数の方法で配信され、同時にスマホやTVなど多様な環境で表示される。またそれらの文書は何らかの形で保存され、永続的に再利用されたり参照されたりする可能性がある。再利用される可能性を考慮して文
明快な文章の書き方 – イディア：情報デザインと情報アーキテクチャ
わかりやすく明解な文章を書くことは難しい。伝わる文章を書くために気をつけるべきポイントを5つにわけて解説した。「文章力の基本」の内容をベースに抜粋して加筆。 1：シンプルに書く 短く、簡潔に書くことが明解な文章の基本となる。 短く言い切る 読点で文章を連続させず、句点で区切る。 情報量を制限する 一つの文章には一つの情報しか含まないようにする。 削れる言葉を探す 同じ言葉の重複や似た表現の繰り返しを避け、できるかぎり削る。 英語で書いてみる 相対的に文章力の落ちる英語で書いてみると、文章の骨格を浮かび上がらせることができる。 2：わかりやすく書く 主題を明らかにし、文章同士のつながりも曖昧にしないことがわかりやすい文章につながる。 整理する 主題は何か、どんな構成かを整理してから書く。 曖昧にしない 批判を恐れて漠然と抽象的な文章にしない。 主題を早めに提示する 一番伝えたいことを文章の序
優れたユーザーインターフェースとは – イディア：情報デザインと情報アーキテクチャ
CUI キーボードを利用したコマンド入力による操作（キャラクターユーザーインターフェース） GUI アイコンなどグラフィックシンボルによる操作（グラフィカルユーザーインターフェース） インターフェースのうち、ユーザーがコンピュータを扱うために必要な操作方法や表示方法、仕組みを限定して「ユーザーインターフェース（UI＝User Interface）」とよぶ。 優れたユーザーインターフェースの特徴 PC上で使用されているユーザーインターフェースで、わかりやすさ、使いやすさに優れているものには次の12の特徴を持っている。 ユーザーへの配慮 不安なく使うことができる（Safe Exploration） PCやブラウザの操作に不慣れなユーザーは自分の操作で何が起こるかがわからず、不安を覚える場合が多い。ユーザーに不要な不安感を与えないために、「戻る」や「取り消す」といった「なかったことにする機能」を
色と情報 – イディア：情報デザインと情報アーキテクチャ
色には様々な情報が含まれている。それぞれの想起するモノやイメージを理解し、視覚的なデザインに使うことで、デザインが発信する情報量を増やしたり、情報を構成する要素を減らすことができる。 様々な色が持つ情報 普段目にする様々な色には、それぞれ特有の情報が含まれている。日常生活の中では色の情報を無意識のうちに受け取り、何気なく利用しているが、情報デザインではそれぞれの想起させるモノやイメージを常に意識しなければならない。 「男性＝青」「女性＝赤」というのは多くの国や文化で共通している色のイメージだと言われるが、このようなケースは稀である。色が持つ情報は、文化や時代、国や地域によって異なる場合がある。 マンセル・カラー・システムの基本5色 赤色・レッド イメージ 情熱、危険、興奮、革命、勇気、愛国心、怒り、力、攻撃、野蛮、赤字、セール、採点 モノ 火、血、トマト、イチゴ、鳥居、毒、ポスト、消防車、
ヒューリスティックと情報デザイン – イディア：情報デザインと情報アーキテクチャ
ヒューリスティックとは、人が意識することなく用いている問題解決方法である。いわゆる「経験則」とほぼ同義と考えられる。ヒューリスティックを理解し、うまく利用すると、発信する情報の伝達度や影響力を高めることができる。 ヒューリスティックとは 問題解決や意思決定の際に、論理的な計算やルールに基づくことなく、暗黙のうちに用いている簡便な解決方法のことを指す。「経験則」と同じ扱いをされることが多く、ほぼ同義である。 ヒューリスティックの研究が進むまでは、人の学習や経験に基づく判断は正しいとされていた。しかし人の判断には様々な偏り（バイアス）が存在し、その正確さは完全ではないことが明らかになっている。 ヒューリスティックのメリットとデメリット メリット ある程度以上の精度で正解に近い答えを得ることができる 答えに至るまでの時間が短い デメリット 必ずしも正しい答えを得るわけではない 答えに一定の偏りを
ドンキーコング | ファミコンから学ぶ情報デザイン・3 | イディア：情報デザインと情報アーキテクチャ
ファミコンのヒットゲームには、参考にするべきデザインや表現、情報伝達の方法が数多くみられる。 ドンキーコング ゲーム名 ドンキーコング メーカー 任天堂 発売年 1983年 世界販売本数 113万本 ゲーム概要 マリオを操作してドンキーコングにさらわれたレディを助ける、一画面固定アクションゲーム。現在では任天堂を代表するゲームキャラクターとなったマリオが初登場する、記念碑的作品。 ステージ 工事現場を模したステージはコミックやアニメで人気の「ポパイ」の一場面をモチーフとしている。ゲームの目的は「レディを助けること」であるが、アクションとしての目的は「画面上部に到達すること」である。これを示すべく、次のような工夫がなされた。 ポイント はしご、樽、火の玉 まず、画面上に「はしご」を設置した。最下層にいるマリオははしごを登ることを緩やかに誘導されている。次に、ドンキーコングが「樽」を落としてマ
横井軍平ゲーム館 RETURNS ゲームボーイを生んだ発想力 – イディア：情報デザインと情報アーキテクチャ
データ 書名 横井軍平ゲーム館 RETURNS ゲームボーイを生んだ発想力 著者 横井軍平、牧野武文 出版社 フィルムアート社 発行日 2010年6月 概要 「ゲームウオッチ」や「ゲームボーイ」、「ラブテスター」など任天堂で数々のヒット商品を手がけた横井軍平氏の自伝ともいえる一冊。横井氏の思考法や発想法、哲学を知ることができる。「横井軍平ゲーム館」(アスキー・1997年)の改訂復刻版。 抜粋 横井氏の開発哲学は「枯れた技術の水平思考」というもの。先端技術ではなく、使い古された技術の使い道を変えてみることによって、全く新しい商品が生まれるという考え方だ。 ブロックで遊んでいる子供をよく見てみると、形を作るというのは実は前段階にすぎない。多くの子供が作ったブロックを壊すことに快感を感じているのである。 この十字キーの原型はジョイスティックである。これを薄型ゲーム機であるゲーム＆ウオッチに組み込
情報検索の7ステップ – イディア：情報デザインと情報アーキテクチャ
「情報検索」は情報化社会において欠かすことのできない技術のひとつである。情報検索の仕組みと流れ、適切なキーワードの選び方を知ることで、効率良く確実に目的の情報を検索することができる。 情報検索の種類 存在を知っている情報を探す検索 例えば、戦後の日本における出生率の推移を調べる場合 予備知識を得るための検索 例えば、旅行先の飲食店の情報を調べる場合 網羅的に調べる検索 例えば、家族の病気の治療法について調べる場合 検索される概念の種類 固有概念 人名、地名、商品名、サービス名など 一般的概念 多様な言葉や文章で表現される 固有概念、一般的概念の検索の仕方 キーワードとは キーワードは、その情報を外と区別する特徴を表す言葉、あるいは探す手がかりとなる言葉を指す。情報検索においては「調べたい概念」を言葉によって表現したものがキーワードである。 キーワード＝索引語 キーワードは「索引語」と同義で
効率的で効果的な本の読み方 – イディア：情報デザインと情報アーキテクチャ
文化庁が2008年に行った調査によると、1ヶ月に1冊も本を読んでいない人は国民の半数に及ぶ。メディアが多様になり、情報を入手する手段が増えたものの、本の情報発信力やその扱いやすさは健在だ。本をよりたくさん読むための、またより深く読むためのtipsをまとめた。 はじめに 「本を読む」というと、小説など文学作品の読書を連想することが多いが、今回は特に技術書、ビジネス書などの実用書についての本の読み方について考察している。また技能や経験が必要な速読術、多読術の類ではなく、だれでも今日から実践できる工夫をまとめた。 本を選ぶ ビジネス書や技術書では、楽しむためというよりは必要な情報を得るために本を読む事が多い。その目的を達成できるであろう本をきちんと選ぶことが良い読書のスタートである。 どの本を読むか検討をつける インターネットで下調べをする いくつかある候補から絞り込む 書店や図書館で調べる 一
セマンティックウェブ – イディア：情報デザインと情報アーキテクチャ
検索最大手のGoogleが2012年5月中に検索エンジンの改定を予定していることが報じられた。これは2007年に行われたユニバーサル検索の実装以来となる大規模なものであり、「セマンティック検索」を実現する第一歩と考えられている。セマンティック検索に代表される「セマンティックウェブ」についての基礎的な知識をまとめた。 セマンティックとは セマンティックとは「意味に関する」や「意味論的」の意味を持つ。「意味論」とは言語学において、語や句、文などが持つ意味を研究する分野である。 セマンティックウェブとは HTMLの限界 HTMLは文書の構造を記述するための言語であるが、単語の意味や単語が使用されている文脈を記述することはできない。たとえばある商品の近くに「9,800円」という価格が書いてある場合、それが定価なのか、売価なのか、それとも卸値なのか、HTMLはそれを記述できる仕様ではない。その結果、
目で見る言葉 – イディア：情報デザインと情報アーキテクチャ
文字は言葉を表記するのに用いられる符号である。一方、言葉を絵で表す方法もあり、文字同様広く使われている。文字の代わりに絵を用いる理由や、絵を用いたほうが効果的なケースを考える。 歴史上の目で見る言葉 洞窟壁画 有史以前に洞窟や岩壁に描かれた絵。最古のものでは約3万2千年前に描かれたもの（ショーヴェ洞窟・フランス）がある。洞窟壁画に描かれた題材の多くは大型の野生動物であり、その時代の文化や信条を推測する手がかりとなっている。 ラスコー洞窟の壁画は先史時代の美術作品としても評価されている。 漢字、西夏文字、東巴文字 漢字は紀元前十数世紀の殷の時代には用いられていたとされる象形文字の一種。東巴文字（トンパ文字）はチベット東部や雲南省北部の少数民族に伝わる象形文字で、7世紀ごろに創作されたと考えられている。西夏文字は西夏王朝（1032～1227、現在の中国西北部に存在した王朝）時代に制定された。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
マンガと情報デザイン・3（質感の表現） – イディア：情報デザインと情報アーキテクチャ
チープエフェクト – イディア：情報デザインと情報アーキテクチャ