株式会社エイチナイン

Concept

株式会社エイチナインは「視覚デザイン・情報設計・システム構築」を軸に、センセーショナル&エモーショナルなデザインと、それに呼応したユーザインターフェイスを提供すべく、最新技術への取り組みを日々行っております。進化し続けるマルチデバイスへのロジカルな対応と、リテラシー(情報を処理する能力、知識や機器を利用する能力)の向上につながる表現力や操作性が優れたデザインは、多様なクライアントニーズにマッチしたユーザーエクスペリエンスを実現します。
一つのメディアを制作するために、様々な要求に対応する手法を選択し、最適なゴールへと導きます。

Works

  • PC
  • TABLET
  • SMART PHONE
  • MOBILE
  • DB and CMS
  • GRAPHIC and AD
  • PHOTOGRAPH

Internet Services

  • ネット広告の統合的メディア戦略コンサルティング
    開発・効果測定・レスポンス・トランザクション(取引き)
    コンサルティング
  • クオリティの高いWEBデザインを提供。情報を整理し、レイアウトにリズムと法則を与え、クライアントとユーザが共に有益となるデザインをご提案しますデザインプランニング
  • ファーストビューのイメージから、コピーワークまで戦略的、統括的にユーザとの結びつきを強めますブランディング
  • ご予算に合わせて、サイトの企画/制作/運用支援を行います。お客様のニーズに幅広く対応しますWEBサイト - 企画/制作/運用支援
  • 最新のブラウザに対応したSEO / SEM対策コーディングの実践 アクセス解析、サイト分析、アフィリエイト対策のサイト実装各種ガイドライン策定/SEO/SEM
  • WebRelease2 などの商用CMSの設計・運用管理。PHP&mySQLによるソリューション開発 / WordPressなどCMS - WebRelease/NOREN 他
  • 対応バージョン Actionscript 3.0 / 2.0 / 1.0 xml・PHP・Ajax 等との連携 / FLVを活用した動画サイト構築などFLASH
  • FLASH / AfterEffects / Premire / Maya / 3ds max などを使用イベント・ビジネスショー向けデモンストレーションVTR作成動画 - 3D/2D
  • BGM / クリック音などの環境音 / ジングル用音源の作成サウンド - 効果音/各種音源制作

Graphic Services

  • クリエイティブデザイン、各種広告のデザイン・企画・印刷・校正等、企業の宣伝からマーケティングまで対応します。広告/CI/VI/カタログ
  • 企業、省庁、学校法人、雑誌、広告、ホームページ、マニュアル用、テレビ番組・ジングル用 など、各種テーマにあったイラストを作成イラストレーション
  • 化粧品、お菓子、ドリンク等のパッケージデザインからDVDなどのジャケットデザイン、雑誌およびムック本のエディトリアルデザインまで幅広く対応します。パッケージ/エディトリアル
  • 弊社内または契約スタジオにて撮影を行います。色調補正、画像切抜きも対応撮影使用機材 CANON EOS / 1Ds / 1D / 5D / 40D などを使用スチル写真

e-Commerce & Database Websites

  • ご予算に合わせて、ECサイトの構築 / 運用支援を行います
    大規模ECサイト構築から低予算のサイト設計まで、幅広く対応します
    ECサイト構築/運用支援
  • ご予算に合わせて、大規模サイト構築から低予算のサイト設計まで、幅広く対応します。開発言語 C / Perl / PHP / Java 等データベース/システム開発
  • バーチャルドメイン ホスティングサービス
    専用サーバーホスティング <データセンター使用>
    サーバホスティング

Competition & School & Event

  • 新規サイト構築やリニューアルを検討されているクライアント様と共に、WEB制作会社に向けた企画・デザインコンペの主催をサポートいたしますコンペティション主催
  • 定期的に「新技術セミナー&講習会」を行っております
    サイトの運用に関連する技術と知識を短期間で習得可能です
    研修&スクール事業
  • イベント告知から、WEBサイト構築、当日の進行管理、映像制作、MC、決算報告書の作成まで、トータルにサポートしますイベント企画・運営

h9 Booklet.

Profile

Greeting

2013年までに1000を越える案件をワンストップで制作しております。少数精鋭のメリットを活かし、ロイヤリティの高いスタッフワークと、密度の濃い制作プロセスを実現しています。費用対効果の改善やウェブサイトのクオリティアップ、コンペティション開催や各種制作マネジメントのご依頼などをお考えの際には、是非、わたしたちにご相談ください。

Biography

1996
民放テレビ局 番組内イラストレーション担当
1997
フリーランスにてクリエイティブデザインを担当
1998
エヌブイシーエル 広告代理店 起業
1999
大手プロバイダーのチャンネルや国内ブランドサイトを構築
2000
クリエイティブ系専門学校 非常勤講師 就任
2001
有限会社エヌブイシーエル登記 WEB制作代理店 起業
2002
スタッフ増員 大手企業から個人サイトまで幅広く制作
2003
営業所を新宿区高田馬場に移転
2004
カタログ・WEBデータ連動メディアの企画・制作を開始
2005
契約データセンターを活用したサーバーホスティングを開始
2006
企業セミナー、講習会、勉強会を開始
2007
専門学校講師 退任 システム開発部門 設立
2008
CMS部門・ガイドライン部門 設立
2009
株式会社エイチナインに社名変更
2010
スマートフォン向けコンテンツ制作を開始
2011
CMS構築に特化した専門チームを発足
2012
eコマース向けに特化した専門チームを発足
2013
大型画面(電子黒板)用コンテンツの提供
2014
ハイブリットキャスト関連事業の開始
会社名 株式会社 エイチナイン
住所 〒169-0075 東京都新宿区高田馬場1-17-22 横山1F
電話 / FAX 03-3203-3586
取締役 山本 司
設立 1996年6月1日 <2001年8月31日登記>
目的
  • 広告業
  • グラフィックデザインの企画及び制作
  • インターネットのホームページの企画・立案
  • 情報システムの設計・運用に関する受託
  • ソフトウェアの開発・販売
  • 映像・音響を使用した情報提供サービス
  • デザイン・インターネットの指導教室の運営
資本金 300万円
スタッフ

9名

  • デザイナー
  • コーダー
  • プログラマー
  • イラストレーター
  • ディレクター
  • エディター






各種、お問い合せに関しましては、以下のフォームに必要事項をご入力の上、「送信する」ボタンを押してお送りください。

株式会社エイチナイン(以下当社)はインターネットにおいて、WEBサイト構築やマルチメディアツールの制作等を行います。コンテンツを制作するにあたり、見積もり依頼、お申し込み等、 情報の収集が必要となる場合、お客様とコンタクトをとる際に、お名前、住所、メールアドレスなどの個人情報をお聞きします。

当社は、個人情報の重要性を認識し、以下の内容を実施いたします。

・お客様から個人情報をいただく場合には、その使用目的を明らかにし、適切な範囲でご提供いただきます。

・お客様個人に関する情報を取り扱う場合、管理責任者を置き、その管理責任者が適切な管理を行います。

・お客様より取得させていただいた個人情報を適切に管理し、お客様の同意がない第三者への提供、開示等は一切行いません。

・お預かりしているお客様ご自身の個人情報について、ご本人様より開示、訂正または利用停止等をご要望される場合、法令及び当社所定の手続に従い、適正に対応させていただきます。

・業務委託を行なう場合には、業務委託先と秘密保持契約を締結し、個人情報の厳格な管理を義務づけ、制作進行を行います。
※当社ではセキュリティ部門を設けさせていただいております。

上記各項における取り組みを適宜見直し、改善を行います。

< 個人情報保護に関するお問合せ窓口 >

株式会社エイチナイン
E-mail:info@highqualityandliteracy.com

ご依頼内容
※複数選択可能





制作分野
※複数選択可能











お客様情報
御社名
御氏名
電話番号
FAX番号
所在地
E-Mail
業種
コメント

h9 lab

ショッピングサイト構築を開始。

株式会社エイチナインでは、会社設立当初から、数多くのショッピングサイト構築を行って参りました。Perl,PHP等のフルスクラッチによるサーバシステムの構築や既存のサーバ組み込みECシステムのテンプレート開発等、お客様のニーズに合わせて開発・提供して参ります。

構築履歴

・EC-Cube
・楽天RMS
・ストアカート
・カラーミーショップ
・弊社独自ECサイトシステム 他

EC-CUBE PLAN

オープンソースであるEC-CUBEを基盤システムとして導入し、弊社の得意とする、デザインとコーディング、プログラミングの知識を活用し、従来よりも短期間でリーズナブルなショッピングサイト構築を実現することができます。また、SEO対策やブログなどのツールも合わせてご提案いたします。

楽天 PLAN

楽天RMSの仕組みを理解し、必須テンプレートのカスタマイズ、商品登録、サイト公開、定期的な運用・更新業務をサポート。初期ロットの商品スチル撮影もオーダー可能です。

初めてのお客様、
業者選定が不安なお客様へ

ドメイン取得からレンタルサーバ選定など、ショッピングサイト構築が初めてのお客様には、担当者が、お客様のニーズと費用にあわせた最適なプランをご提案いたします。

弊社は「本当のデザイン」「WEBサイト構築ノウハウ」「最新技術の探求」をテーマに、中小企業から、大手クライアント、官公庁サイトまで幅広く制作を行っております。
特に「ガイドライン」には力を入れており、W3CやJISなどのドキュメントを総合的に理解し、最適なWEBサイト作りをご提案しております。

WEBサイト構築・運用を行う際に欠かすことの出来ないコンテンツマネジメントシステム。弊社にて実装可能なツール群を記載いたします。
これまでの構築実績はツールにより様々です。商用CMSではWebRelease2をメインに、PHP&MySQLを活用したオープンソース系ではWordPressを主に活用しております。
またディレクションや情報設計、大規模サイトの設計・運用などもお気軽にご相談ください。
コンサルティングから制作スケジュール、運用まで幅広く対応いたします。

商用CMS

・NOREN
・WebRelease2

オープンソースCMS(GPL/MIT)

・Nucleus
・Movable Type
・WordPress
・XOOPS Cube Legacy
・eZ Publish
・MODx
・SOY CMS (root必須)
・h9 mini CMS (自社開発) 他

撮影もオーダー可能です。

日進月歩のWEBリテラシーに対応していくために、お客様の満足を最大限に引き出すために、ウェブディレクション方針を策定いたしました。
これから制作会社をお探しの代理店様にも業者選定の基準となり、ご好評いただいております。

コンセプト

・効率の良い進行
・正確な運用と分析
・最適な予算と品質

過去の経験は「引き出し」であり、サイト制作の目的には成り得ない。
ゆえに、常に「新しい着想」を心掛けて制作することが大切である。

Phase1 < Project Management >

[ プロジェクトの最適化 ]

- スケジュール管理
- クリエーター/プログラマーとの連携
- クライアントニーズとの整合性
- 予算/見積もり

Phase2 < 企画 >

[ サイトコンセプト ]

- 目的/ターゲット
- 優位性と差別化
- キャッチコピーや文章・写真

[ プロモーション ]

- 9つのポイント

Phase3 < 設計/仕様 >

[ IA (情報設計) ]

- ハイクオリティな情報デザイン
- 正しいホームページ作り < ガイドライン >

Phase4 < 制作/フィードバック >

[ デザイン ]

- 細部にまでこだわったWEBデザイン
- 正規化されたXHTML/CSSコーディング
- サイズ(グリッド/書体/画像)と色のバランス

[ 実装・運用 ]

- ヒューリスティック分析
- ユーザビリティ/アクセシビリティ
- SEO対策
- アクセス解析

会社設立以降、新しい技術への取り組みと最新のニーズにマッチしたWEBサイト構築を行うプロダクションとして、制作現場での日々の業務にて、経験と実績を重ねてまいりました。

制作会社としての存在意義や、様々なテーマを日々探求していく中で、今後更に、クライアント様への貢献していくために何をすべきかを考え、多種多様なニーズに対応する為のフィードバックを私達自身が行うべきだと考えました。制作会社だから可能な、制作メソッドとガイドライン、ワークフローを立案し、お客様を最適なゴールへと導きます。

WEB総合研究部の設立に際し、以下の項目を基軸に展開して参ります。

・WEBサイト構築に詳しいスタッフが
 直接お伺いいたします。
・最適なサイトの規模や、ご予算をより
 速やかにご提案いたします。
・弊社独自のヒアリングシートを用いて、
 相互理解を促進いたします。
・最新の弊社制作実績を事例を踏まえて
 解りやすくご説明いたします。
・特設サイトへのログインアカウント
 発行し現場の状況をお知らせいたします。
・弊社担当スタッフの詳細プロフィール
 ページをご覧いただけます。

活動内容

・ウェブコンサルティング
・ウェブサイト分析
・ガイドライン策定

・コーディングルール策定
・技術セミナー、新入社員研修、
 各種勉強会の実施
・様々な問題改善の施策立案
・サイト運用支援 < コスト削減ノウハウ
 の提供 >
・パソコンスクール、個人レッスンの開催

クライアント様への初期提案やサイト構築ノウハウの提供、技術面でのサポート、
新規サイトご提案、サイトリニューアル、各種CMS導入、ECサイト構築&運用など、
ウェブ事業に特化したニーズに幅広くお応えしていく所存でございます。

WEB総合研究部は「ウェブサイト構築」の担う役割を、お客様の目的達成への近道となるべく努力してまいります。

h9 WEB総合研究部

WCAG2.0 second Last Call Working Draft 2007/12/11
1.4 前景の情報をその背景と区別しやすくする。※このガイドラインには、レベル 1 達成基準はない。

レベル1  通常の支援技術やユーザエージェントによって最低限のアクセシビリティを達成する基準で、すべてのウェブコンテンツに適用できるもの。

レベル2  通常の支援技術やユーザエージェントによって、又はコンテンツのデザインやプレゼンテーションによって,高いアクセシビリティを達成する基準で、すべてのウェブコンテンツに適用できるもの。 at least 5:1. (Level 2)

レベル3  L1やL2以上の要求をする基準で,すべてのウェブコンテンツに適用できるとは限らないもの。 at least 10:1. (Level 3)

Contrast (Minimum): Text (and images of text 18 ポイント) have a contrast ratio of at least 5:1, except if the text is pure decoration. Larger-scale text (14 ポイント以上 の太字) or images of text can have a contrast ratio of 3:1. (Level AA)

Contrast (Enhanced): Text (and images of text 18 ポイント) have a contrast ratio of at least 7:1, except if the text is pure decoration. Larger-scale text (14 ポイント以上 の太字) or images of text can have a contrast ratio of 5:1. (Level AAA)

Coloration Sample

Color Contrast Map

上記の検証には、カラーコントラストアナライザー 2.0を利用させていただきました。
※2008/12/11 W3C Recommendation において、5:1 → 4.5:1に変更されています。
WCAG 2.0 の達成基準で検証することが全て正しいとは言い切れません。ただし、デザイナーの意思と反してに視認性が悪く、評価し難いコンテンツが散乱している事実も受け止めなければならないと思います。正しいデザインとは、万人に共通の理解を促す役割を担っていると言えます。h9では配色の指針としてご提案しております。

http://www.highqualityandliteracy.net/study/

※別ウィンドウが開きます。

・PHP < 基本操作 RSSリーダー等 >

→ SimpleXML(PHP5)
→ mod_rewrite
→ ディレクトリと画像

・Javascript < サイト構築に便利なTips集 >

→ htmlタグとJavascript
→ Menuとマウスイベント
→ onLoad周り
→ 流行りモノ(時間があればjQueryとか)  

・Actionscript3.0 < ナビゲーション周り >

→ ボタン処理系
→ xmlパース
→ イベントリスナー
→ 画像周り

・文書型宣言(Doctype)のおさらい

→ HTML4.01
→ XHTML1.0

・CSS hack

→ サンプル紹介

・CSS3

→ 擬似クラス・要素の紹介
→ CSSプロパティ紹介
→ ディレクトリと画像

・HTML5

→ 新機能
→ 廃止タグ
→ 文書型宣言・メタ・サンプルなど

紙からハイパーテキストへ ~デザインと社会構造の変化~

ドキュメントを読む

※メタファー
[metaphor]
隠喩(いんゆ)

言葉の上では、たとえの形式をとらない比喩。「…の如し」「…のようだ」などの語を用いていない比喩。

「雪の肌」「ばらの微笑」の類。

※アフォーダンス
(affordance)

事物の知覚された特徴、現実の特徴主にそのものをどの様に使うことが出来るかを決定する基礎的な特徴。 アフォーダンスはものをどう取り扱ったらよいかについての強力な手がかりを提供してくれる。

ノブ=回すもの
スロット=何かを挿入するもの
ペダル=踏むもの

※可視性
(visibility)

操作の結果がみえること。
可視性は、しようとしている行為と実際の操作の間の対応づけを示している。

スイッチをいれる→明かりがつく

取っ手を動かす→刃が動く

※対応づけ
(mapping)

コントロール手段とその動きと、それが実際の世界に及ぼす結果の間の関係、物理的な類比(アナロジー)やある文化内での標準的なきまりをうまくいかした、自然な対応づけを利用すると、すぐに理解できるようになる

スイッチを上にあげる=上に移動する

ハンドルを右にまわす=右に曲がる

※フィードバック

どの様な行為が実際に遂行され、どの様な結果が得られたかに関する情報をユーザーに送り返すこと。

モード選択 - ピッ
決定 - ピピッ
完了 - ピッピッピッ

※しい 【恣意・肆意】

1.
その時々の気ままな思いつき。自分勝手な考え。
「会長の―によって方針が左右される」

2.
物事の関係が偶然的であること。
「言語の―性」

※メンタルモデル
(Mental Model)

メンタルモデルとは、実際の機器の振る舞いとの整合性に関らず、ユーザが心的に持っている機器の動作に関するモデルである。ユーザが機器の振る舞いを元にして作り上げたモデルなので、見掛けはもっともに感じられ、普段はその理解でうまくいく(何故なら普段の振る舞いから作り上げられたものだから!)。しかし、このメンタルモデルと実際の機器の振る舞いとの間に差異(=誤解)がある

道具は私たちの生活を豊かにしてくれるだけでなく、社会に対しても多大な影響を及ぼしている。電話やコンピューターなどは、発明された当時はそんなもの必要ないと思われていたが、私たちの生活を劇的に変えてしまった。
たとえば紙の歴史を振り返ってみると、技術が変わっていくに従って、言葉や文章構成も変わっていった。はるか昔、まだ紙が高価でインクで文字を書いた頃は、一度書いたものを訂正できなかった。そのため文章は長くて装飾の多い型どおりに作られたものとなった。しかし文章作成のツールが便利で安価なものになってくると、書くスピードも速まり、口語に近い文章になっていった。そしていろいろな平面の構成の仕方や本の形態などが考え出されていった。そして今また新たな文章のツールが登場した。インターネットなどに使われるハイパーテキストである。

これを使うと今まで紙の文章で使われていた訳注などがいらなくなる。気になった単語をクリックさえすればその情報が手にはいるのである。このツールはまだ未知の可能性を秘めていてまだまだ形式的なものは作られていない。本に使われるページという概念を使わずにスクロール(巻物のメタファー)という概念で表すこともできるし、またアニメーションを使うこともできるのでキネティック・タイポグラフィーといった新しい表現も可能だ。キネティック・タイポグラフィーとは文字を空間的に配置しただけでなく、時間軸を与えたもので、文字の動きによって、その文字が表す音の大きさ、性質、また感情までも表現してしまうハイパーテキストならではの新しい表現方法である。

このように文字を書くツールが変化しただけで文章の表現が変わってしまうように、私たちの生活は道具によってどんどん変化していく。私たちが想像可能なことは将来必ず実現されるといわれている。つい最近まで夢物語だったもの、たとえば、家にいながら買い物をする、世界中の人と顔を見ながら会話する、などついていけないほどのスピードで技術が開発されている。こうした道具なしでは生きていけない社会、道具があふれる社会になった今、万人がわかりやすいデザインは想像以上に重要なことである。あらゆるものにコンピューターが導入され、機械音痴の人が生きていけない社会にならないように心がけていく必要がある。

道具、そしてデザイン

世の中にはいかに使いにくくデザインされたものがあるか改めて知った。見た目には美しい洗面所の蛇口をいざ使ってみると、蛇口と設置された間の隙間があまりに狭く、洗いにくい。複雑な電話の機能を使いこなせず、今までどれ程自分を攻めてきたことだろう。

普段の生活の中の道具を気にかけてみるようになった。今まで良いと思っていたデザインは、ほとんどただの外見の美しさや装飾に過ぎず、本当にすばらしいデザインというのは、その使いやすさにあるということが分かった。(使いやすく、見た目も美しいのが一番であるが)

私は家具や各種道具といった プロダクトのデザインには直接関わらないとは思うが、目に見えない部分のデザインはすべてのデザインに応用可能であり、最も基本の部分なのだろうと思う。
広告を作るにしても読みやすさ、本を作るにしても自然と人の目を導く流れの文章、めくりやすいページなど、探し出せばきりがないだろう。

最近の世の中は『便利』と言われているが、それは反面にどんどん複雑な機械が導入され、使う側の私達は、慣れない操作に混乱を生じる。本当の快適さを求めるために、まさにこれからのデザイナーが、最も突き詰められ必要と求められる部分である。

ユーザの為のデザイン

・デザインは次のようでなくてはならない

  1. いつかなるときにも、その時点でどんな行為をすることができるのかを簡単に分かるようにしておくこと。
  2. 対象を目に見えるようにすること。システムの概念モデルや他にはどんな行為を行うことができるか、そして、行為の結果なども目に見えるようにすること。
  3. システムの現在の状態を評価しやすくしておくこと。
  4. システムの実見に必要な行為の対象関係、行為とその結果おこることとの対応関係、目に見える情報とシステムの状態の解釈の対応関係などにおいて、自然な対応づけを尊重し、それに従うこと。

・難しい作業を単純なものにするための原則

  1. 外界にある知識と頭の中にある知識の両者を利用する。
  2. 作業の構造を単純化する。
  3. 対応づけ意を正しくする。
  4. 自然の制約や人工な制約の力を活用する。
  5. エラーに備えたデザインをする。
  6. 以上のすべてがうまくいかないときには標準化をする。

・作業の構造を単純化する

  1. 作業は以前と同じままで、メンタルエイド
    (思考.記憶上手助け)を利用できるようにする
  2. 技術を使ってこれまで目に見えなかったものを目に見えるようにし、その結果としてフィードバックや対象をコントロールする能力を向上させる
  3. 作業は以前と同じままで自動化をすすめる
  4. 作業の性質自体を変更する

・対応づけを正しくする

  1. 意図とその時点でユーザが実行できる行為の関係
  2. ユーザの行為とそれがシステムにおよぼす影響の関係
  3. システムの実際の内部状態と目でみたり聞いたり感じとれたりするものの間の関係
  4. ユーザが知覚できるシステムの状態とユーザの欲求.意図.期待の関係

・わざと使いにくくする 使いにくくつくったほうがよいもの

  1. 人を中に閉じ込めておいたり締め出しておいたりするためのドア。
  2. 権限を持った人だけが使えるように設計された機密性の高いシステム。
  3. 危険な装置で利用制限があるようなもの。
  4. 生命に危険が及ぶような危険な操作。こういうものは、一人だけではその行為を実行できないように設計した方が良い。
  5. 秘密のドアやキャビネットや金庫等。普通の人にこれらが分かってしまうようでは困るし、まして開けられてしまったりしたら困る。
  6. 薬や危険なものが入っているキャビネットや瓶。小供を守るためにわざと開けにくくいている。
  7. ゲームの類なもので、デザイナーが理解しやすさや使いやすさの約束をわざわざねじ曲げているもの。
  8. ゲームは難しいのは当たり前なのである。
  9. もちろん、列車のドアはこの対象ではないはずだ。

・わざと使いにくくする方法

  1. 重要な要素を隠し、対象を目に見えなくする。
  2. 行為遂行のサイクルの実行側で、不自然な対応づけを使うようにする。
  3. ユーザが実際に行う行為を難しいものにする。
  4. 作業を行うタイミングや物理的な操作に正確さが必要なようにする。
  5. フィードバックを全く与えないようにする。
  6. 行為遂行のサイクルの評価側で、不自然な対応付けを使うようにして、システムの状態を解釈しにくくする。

よくデザインされたものは、容易に解釈したり理解したりすることができる。そういうものにはどう操作したらいいか目に見える手がかりがある。一方、悪いデザインのものは、使いにくく、使っているといらいらしてくる。そういうものは
手がかりがなかったり、場合によっては間違った手がかりがあったりして、利用者を困らせる。

可視性はデザインの最も重要な原則の一つである。

操作するときに重要な部分は目に見えなくてはならない。またそれは適切なメッセージを伝えなけばならない。これは自然なシグナルを送り、特別意識しなくても自然に解釈されなければならない。こういったものを自然なデザインと呼ぶ。また、したいこととできそうなことの対応づけに関わる問題もある。

アフォーダンスという言葉は、物事の知覚された特徴あるいは現実の特徴、とりわけ、そのものをどのように使うことができるかを決定する最も基礎的な特徴の意味で使われている。ものをどう取り扱ったらよいかについての強力な手がかりを提出してくれる。アフォーダンスの特徴が上手く使われていれば、何をしたらよいかはちょっと見ただけでわかる。絵やラベルや説明の文章も必要ない。複雑なものには、説明がいるかもしれないが、簡単なものには必要であってならない。

単純なものに絵やラベルや説明が必要であるとしたら、そのデザインは失敗である。 利用者のための最も基本的な原則

  1. よい概念モデルを提供する。
  2. ものを見えるようにする。

機能が増えれば複雑さと使いにくさが増大することは避けがたいという技術の逆説が存在する。しかしうまくデザインしさえすれば、それほど複雑にも、また使いにくくもならないようにすることもできる。

道具の考察

Form Follows Function ~形は機能に従う~

道具を使うためには、それを使うための知識が必要だ。
もし、道具を使うためのそうした知識の全てを記憶していかなければならないとしたら、使い方を学ぶことは相当な努力を要する。それなのに私たちが、毎日沢山の道具を問題なく使いこなしているのは、一体なぜだろう?

  1. ふたも穴もない四角い物体があったとする。このままではヒトはどういう働きかけをしていいのか全くわからない。
  2. これにボタンが加える。そうすると、ヒトはおそらくそのボタンを押すに違いない。 ・・・しかし、これではまだボタンがどんな操作をするかが分からない。
  3. スピーカーを加える。スピーカーからは音が出るものだという認識があるヒトは、そのボタンが音に関する操作をするのだと理解する。
  4. どのボタンを押せば、どの様な操作が出来るかを表す。ヒトは迷わずしたい操作からボタンを選べるようになる。
    ・・・右向きの矢印は、進行を表す標準的な習慣に従っている。(再生)
    ・・・矢印を増やすと、速度を増す事が容易に理解できる。  (早送り)
    ・・・逆向きは戻るを意味する。(巻き戻し)
  5. 押した時や、操作のはじめ・終わりに光や音の反応を加える。ヒトは操作の状況を確認できるようになる。

私たちは何かを使うとき、意識下で

  • そのものから情報を受け取り(アフォーダンス)
  • そのものから出来ることを想像し(可視性)
  • その結果生じることを理解する。(対応ずけ)

道具が発する情報が明快で、情報量がうまくコントロールされていれば、スムーズにそれを使うことが出来る。私たちはものの使い方を全て記憶しているのではなく、ものとのインタラクションの中でそれらを認知しているのである。

日常場面における行為 使いづらい事を自分のせいにするのは危険なことである。同じ様なエラーを何度も繰り返すと、自分にはそれを使うことが出来ないんだと思いこんでしまい、無力感を味わいます。

そしてついにはチャレンジする事さえもやめてしまうのです。この感覚が他の作業に対しても広がってしまえば、結果として生活すること自体が困難になってしまうでしょう。また、命に関わるような重要な機器を操作する人がミスを犯した場合、人のせいか機械のせいかは慎重に判断すべき問題です。

エラーをした自分を責める前に ここで、あなたが日常使う道具のチェックをしてみましょう。

普段使いづらいなーと思っているものでチェックすると、どういうところが使いづらかったのか分析できてよいと思います。NOという項目があったら、右の欄のキーワードについて、何か問題があるという事になります。

・チェック キーワード

  1. その道具がどういう機能をもったものかがわかるか? アフォーダンス
  2. どんな操作が出来るのかがわかるか? 可視性
  3. 自分がしようとする事のためにどういう行為をしたらいいかがわかるか? 対応づけ
  4. その行為をすることが出来るか? 対応づけ
  5. システムが期待通りの状態かどうかが言えるか? フィードバック
  6. システムの状態と解釈との間の対応づけがわかるか? 概念モデル
  7. システムがどういう状態かがわかるか? 概念モデル

・可視性の問題

デザインの要素の1つである可視性はあまり守られていないことが多い。目に見えなかった情報を見えるようにすることで使いやすさが改善するのである。たとえば、VTRは実行と評価のへだたりの問題があった。可視性が不足しているからだ。これは表示画面を有効に使えばずいぶんと問題は解決する。

表示画面をみながら自分がいまどの操作をしてるかを点滅表示することや最後に自分が操作した情報を一目で見て取れるようにするなどできることはとても多い。これができてないのはデザイナー側が場所をとるしお金もかかるので好まないからである。

ー可視性のかわりに音を使うー

可視性の持つ意味として目にみえることによって自分のしてることが情報としてつたえられ、安心感が生まれることも1つである。その可視性が使えない場合も音を利用することによってある程度の意味をもたせてくれる。
音を有効に使おうとするならば音とそれが運ぶ情報の自然な関係を理解した上で知的に音を作り出す必要がある。自然から出される音は文化的制約に基づく情報である。それ自体、またはそれに近い音は聴覚的アイコンとして役に立つであろう。音は時にはフィードバックとしての重要な機能も果たしたくれる。

しかし音には単にシグナル的な役割や、フィードバックに使えても1つの音に対して1つ情報しかあたえてくれないので、非常に有効とは言えない。目に見えるものには勝さらないのだ。

毎日使う道具に可視性を付け加えるとしたらどんなものが可能か コンパクトディスクの曲目の表示テレビ番組のタイトル表示など

可視性の変わりに音を利用する例 ドアの鍵がもとに戻るときにたてるカチャという音お湯が沸いたときのシューシューという音ドアが完全に閉まってないときのカチャカチャという音などこれらの音は、行った動作が正しいかを判定するよいフィードバックになりうる。

失敗は成功のもと2

ミステーク(mistake)

  • 意識的によく考えることによって生じる。
  • 不適切なゴールを選んでしまうため生じる。
  • よくない選択をしてしまったり、現在の状況を間違ってとらえたり、関連する要因をみんな考慮に入れることができなかったような場合。 記憶している経験に依存してしまうという傾向をもっている。
  • 適切なゴールを形成できたのに実行する時にめちゃくちゃになってしまったのならばスリップ、
  • 間違ったゴールをたててしまったのならミステークに陥ったと言える。 人は誰でもエラーをおかしてしまう。それはデザインをするときに必ず考えなくてはいけない問題でもある。人がエラーを起こすときとはどんなときか、そしてエラーの対処に必要なデザインとはどんなものかをエラーの種類別に考察する。

・エラーの型

人のエラーには2種類に大別される。1つはスリップ(slip)でもう1つはミステーク(mistake)である。

・作業の構造 日常の作業にはどのような構造のものがあるのか。

広くて深い構造
これは行動の選択肢の可能性の問題である。広くて深いというのはチェスのゲームなどで先を読むと何千通りに選択肢が
出てきてしまう。このようなことは日常の生活ではあまりみられない。

浅い構造
アイスクリーム屋でアイスを選ぶときのように選択するのが1回だけのときはえらぶべき範囲は大きいけれどその後の選択はないのでたんじゅんである。浅い構造ではプランニングや分析の深さが問題になることはない。

狭い構造
選択するものが少ないものは狭い構造である。作業の工程は長く続いているがその中で選ぶべき選択肢が1つか2つであればそれは狭くて深い構造といえる。 日常では浅い構造か狭い構造の行動がほとんどである。これは日常であるが故に毎日頭を使って広くて深い構造の行動をしたくはない。だから意識して頭を使う行動を最小化し、すばやく行動に移すことができる。

それに対して、非日常的なものは逆に意識的に頭を使うようなことになる。レクリエーションなどひとが一生懸命になるものには広くて深い構造の作業になる。

・エラーに備えてデザインする

エラーに関してデザイナーは次のようなことを考慮しなければならない。

  1. エラーの原因を理解し、その原因が最も少なくなるようにデザインすること
  2. 行為は元に戻すことができるようにすること。そうでないとしたら元に戻せない 操作はやりにくくしていくこと。(強制選択法)
  3. 生じたエラーは発見しやすくしておくこと。また訂正しやすくしておくこと。
  4. エラーの観念を変えるべきだ。エラーは間違った行為ではなく、ユーザーが 少しずつしたい行為に近づいているのだと考えるのだ。

何事にもユーザーの立場に立って考えることである。

・強制選択法(forcing function)

強制選択法とは行動を物理的な制約によってそれ以降の行動を強制的に狭めるか止める。ある場面で何かしらの失敗をしても次に進めなくするので人はエラーを犯したことに気づくことができる。

この強制選択法にも手法がある。

・インターロック(inter lock)
操作が適切な順序で行われることを強制するしくみ。
・ロックイン(lockin)
ある操作を起動させたままにしておき、誰かがそれを意図せず止めてしまうのを防ぐしくみ。
・ロックアウト(lockout)
危険な所へ立ち入ることや、何かが生じるのを防止するしくみ 強制選択機能は日常生活でエラーがほとんど起きないような場面では面倒なものであるかもしれない。しかし万が一そのエラーで危険が生じるような場合にこの機能で救われることもあるだろう。

デザイナーはこの機能を良く熟知した上でつけなければいけない所とつけると普段の行為に影響が出てしまうようなものには違う方法で考えるなど、いろいろなエラーの可能性を見極めなければならない。

・コンピュータの問題

コンピュータをはじめて触った人がすぐ使いこなせることはまずないだろう。それだけコンピュータには問題があるからだ。しかし問題があるということはそれだけ使いやすくなる可能性があるということだと思う。コンピュータには形というものが無い。有能なシステムにするには第一に対象が目に見えるようにすることだ。なによりも今まで述べてきたデザインの原則に当てはまったプログラミングをしていくことが必要だ。

デザインという難題

デザインの自然な進化よいデザインの多くは進化する。あるデザインが試され問題が見つかり修正される。試されては再び修正されるという繰り返しが、時間とエネルギーと資源が尽きてしまわない限り続く。

・デザインの進化に逆らう力

しかし、自然なデザイン画どんな場面でも有効というわけではない。
(競争原理にもとづく市場においては複数の力が働いている)

・時間の切迫

新しいモデルがデザインの工程に入るのは、その前の型の製品が販売されるよりも前である場合があり、さらにその製品を使ったお客さんの大権を集めてフィードバックするための仕組みはめったに存在しない。
既製のものとは違った新しい製品を作ろうとする志向。ただ一つのよう製品に固執したり、自然な進化がゆっくりと完成の域に達するのに満足しているような企業はほとんどない。

・個性の主張

デザイナーは自分がそれにかかわったという証拠や印やサインとでもいうものを残さなければならない。いくつかのメーカーが同じ製品を作るとしたら、そのどれもが他のものとははっきり違うように作らないといけない。

・なぜデザイナーは正しい道から外れてしまうのか

デザイナーの落とし穴

  1. 美しさを第一とすること デザイン界の褒賞のシステムが美を第一にしがちである。毎日の生活は目に楽しいかも知れないが、快適ではないだろう。
  2. デザイナーは典型的なユーザではない 自分がデザインしたものを使っている内に、その専門家になってしまい誰かが使用時に困難を覚えるなどということは想像もできなくなってしまう。
  3. デザイナーの顧客が実際のユーザであるといは限らない 例えば主だった家庭内の道具類でも、購入するのは不動産や家主であることが多いが、使うのは実際にそこに住む人である

・デザイナーの問題

デザイナーには常に時間と経済的な圧力がのしかかっている。さらに二つの致命的な誘惑について述べてみる。
なしくずしの機械追加主義ある装置を使ってできる機能の数をどんどん追加していって、どう考えても異常だと思えるくらいまでにしてしまうこと。それは使いにくく、理解しにくいものとなる。

・解決法

機能の追加を避ける。
少なくともきわめて慎重に追加すること。
体系化(モジュール化)すること。

ひとまとまりの機能を集めて、他のまとまりとは別のところに置き、その間に仕切りをつけておく。
それぞれの機能モジュールをつくり、その中には限定された数のコントロールしかなく、それぞれが作業のある側面のみ専用ということにする。

過ったイメージをありがたがる。

デザイナーもユーザも、複雑さをありがたがることさえある。見た目は素敵で彩り鮮やかではあるが、ほとんど使いこなすこともできない道具となる。 (例)法律事務所では、最も高価で機能満載の型の複写機がベストセラーになった。複雑すぎてほとんどの人が使いこなせないのに、立派な複写機を据えておくことで、その事務所はハイテクのきびしい試練にもちゃんと対応できているということを誇示しているのだった。

失敗は成功のもと

人は毎日のようにエラーをする。

エラーの基本的なカテゴリーにスリップとミステークがある。
スリップ(srip) ・自動化された行動から生じるもので、なんらかのゴールを達成しようとしてあまり意識せずに行った行為が途中で脇道に入ってしまうこと。

  • 日常起こるたいていのエラー
  • 何かをやろうとして気がつくと他のことをやっている。
  • 注意が欠けていることから生じることもある。

スリップの型

  • 行為の類似性から生じる。
  • 外界の出来事がその行為を自動的に引き起こしてしまう。
  • 私達の持つ考えや行為が意図してなかったこを思い出させて、それを実行してしまう。乗っ取り型エラー(capture errors)(physical constraints)
  • 頻繁に遂行される活動が意図していた行為を突如乗っ取ってしまう。
  • 二つの行為系列があり、一方にはよく習熟しているがもう一方にはあまり慣れていないような時で、なおかつその最初の段落が類似しているような時起こる。
    (例)日曜日に買い物に行こうとして車に乗り込み気がつくとオフィスについていた。 記述エラー(description error)(physical constraints)
  • 意図された行為は、そこですることが可能な他の行為と共通点をたくさんもっているので、行為系列を完全にそして正確 に特定しない限り意図した行為は他の行為とぴったり合致してしまう可能性がある。
  • 意図の内的な記述の正確さが不十分な時起こる。
  • 間違った対象と正しいものが物理的に近くにある時起きやすい。
    (例)シャツを洗濯物入れに投げ込もうとして、トイレの便器に投げ入れてしまった。 データ駆動型エラー(date-driven errors)
  • 自動的な行為はデータ駆動であり、感覚データが届くとすぐに起動されるが、時にデータ駆動にする活動は現在実行中の 行為系統にわりこんでしまい、その結果意図していなかった行動を引き起こしてしまうことがある。
    (例)お客さんのために部屋を割り当てていた時、その部屋の番号を秘書に伝えておこうと思い、電話をまわしたが、間違って部屋番号をまわしてしまった。 連想活性化エラー(associative activation errors)
  • 考えや思いつきから起こるもの。
    (例)オフィスの電話がなったので、受話器を取り上げてそれに向かって「どうぞお入りください。」とどなってしまった。 活性化消失エラー(loss-activation error)
  • 単に何かをするのを忘れてしまうこと。
  • 行為系統の一部は忘れてしまうけれども残りは覚えているということ
  • 行為の目的の活性化が失われてしまうことから生じる。 「物忘れ(forgetting)」
    (例)台所まで行って冷蔵庫のドアを開けたはいいが、なぜ台所に来たのか忘れてしまった。 モードエラー(mode errors)
  • あるモードで適切な行為が他のモードでは違う意味を持つような時っ生じる。
  • ある装置が持っている制御スイッチや表示の数よりも、実行可能な行為の数が多く、一つのスイッチが二つの役割を果たしている装置ではいつでも生じる。
  • 今現在どのモードにあるのかが目に見えない場合起こりやすい。
    (例)薄暗かったので、ストップウォッチのライトをつけようとしたら、ストップウォッチモードでは同じボタンでクリアー機能であったため、表示が0リセットされてしまった。
    スリップの場合、明らかにゴールと結果が食い違っているので、見つけだすのは比較的容易である。
    (ただし、フィードバックが存在する時に限る。) スリップの研究からデザイン上の教訓 ・スリップが生じる前にそれを防止する。

  • スリップが起こってしまった時に見つけだし修正する。

記憶の構造

人の記憶は短期記憶と長期記憶に区別できる。 短期記憶(short-term memory;STM)

  • 今現在の情報は自動的にこれに蓄えられ、努力せずとも検索される。
  • 情報の量には限界があり5個~7個(頭の中で記憶すべき項目を繰り返し唱えるようにすれば10個~12個くらい)。
  • 毎日の作業に重要。作業記憶や一時的な記憶の役割も果たす。
    長期記憶(long-term memory;LTM) ・過去に関するものについて。
  • 説明をするために人が持っている機構が、その人の生活に影響を及ぼす。ありとあらゆる歪みや変化の影響を受けやすい。
    概して、何かを長期記憶してしまいこむには時間がかかるし、それを再び取り出すにも時間と手間がかかる。よって、経験を出来事そのままの正確な記憶としてではなく、そのものをどう理解してるかに基づいて解釈した上で記憶にとどめている。
    人間の記憶というもいのは本来、頭の中の知識(内的知識)であると言える。人がどのように記憶を使っていて、どのように情報を検索しているかをよく調べてみると、いくつかのカテゴリーがある。

1.恣意(しい)的なものに関する記憶

保持されている項目が恣意的で格別意味がなく、他の項目やこれまでに知られているものと別の関係がないようにも言えるもの
(例)アルファベットや靴の紐の結び方を学ぶ。いわゆる丸暗記(機械的学習)

2.意味のある関係に関する記憶

保持されるべき項目は、それ自信あるいは既に知られている他のものと 意味のある関係を形成してるもの
(例)オートバイの方向指示器のスイッチが右に動かせば右が、左に動かせば左が点滅するように意味のある構造を持たせる。
(メンタルモデル)ルールや制約を利用し記憶できる。

3.説明による記憶

覚える必要はなく、むしろ他の説明メカニズムによってつくり出されるもの
(例)ミシンの上糸と下糸の構造。(よいメンタルモデルのおかげで、行動の仕方を引き出す事ができる)
外界の知識(情報)と頭の中の知識(情報)はどちらも日常の活動にとって本質的な役割を果たしている。

この2つの知識の間には、トレードオフがつきまとい、例えば、外界に知識を置く事の利点を使おうと思えば頭の中に知識を置く利点が失われる。

人間の記憶というものは希薄なもので、外部の出来事によって思い出されたりずっと暗唱し続ける事によって注意深く頭の中にとっておこうとしない限りそれが頭の中にずっとあるなどということはありえない。このことをことわざで、「目の前から消えてしまえば頭からも消える(去るものは日々にうとし)」とうまく言い表わしている。

頭の中の知識と外界にある知識

人の持つ知識や記憶がいかに誤りやすいか。
(例)アメリカの電話器のダイヤルには、1つの数字に対して三文字のアルファベットが割り付けられている。しかし、ちゃんと電話のダイヤルをすることができ、タイピスト達も速く正確にタイプする事ができる。しかし、電話のダイヤルの数字とその数字に割り付けられてあるアルファベットの組み合わせを思い出す事ができないのである。

正確な行動はできるのに、知識は不正確であるという矛盾があるように見えるのはなぜか。正確な行動をするための知識すべてが、必ずしも頭の中に入っていなければいけないとは限らないからだ。
正確な行動をするための知識は、一部は頭に、一部は外界に、そしてさらに一部は外界がもっている制約の中に分散した形で存在する事がありうる。

情報は外界にある

ある課題を行なうために必要な知識の多くは外界に存在しうる。行動は、(頭の中の)記憶にある情報と外界にある情報を 組み合わせる事によって決定される。 極度の精密さは必要でない知識の精密さ、正確さ、完全さはめったに必要とされない。正しい選択肢を他のものから見極めるのに十分なだけの情報や行動を知識から引き出す事ができさえすれば、完全な行動をする事ができる。

自然な制約が存在する

外界の制約が許される行動を決める。どういう順序で部品を組み合わせるかとか、そのものがどのように動かされたり、つかまれたり、あるいはその他の操作をされたりするのかの可能な操作の範囲は、そのものの物理的な特徴によって制約される。どのようなものにも突起やくぼみやネジ山や付属品などの外形的な特徴があり、それらの特徴が他の事物との関係や、それに対してどんな操作ができるか、何をつける事ができるかなどに対する制限をつけている。文化的な制約が存在する

自然にある物理的な制約以外にも、社会的な行動として何がふさわしいものであるかを決めるための様々な人工的な習慣が社会の中で発達してきた。これらの文化的な習慣は学習しなければならない。けれども、一度学んでしまえばさまざまな状況に適用する事ができる。
これらの自然な制約と人工的な制約のおかげで知識が不正確なものであっても正確な行動を行なう事ができる。