デザインの本質

私は、企業や個人向けのウェブサイトを制作する小さな会社、ケモ・スターの中の人である、萌りきと申します。 私は主に、私たちが制作するウェブサイトのユーザーインターフェースとユーザーエクスペリエンス（UI/UX）のデザインを担当しています。

このブログ記事では、私たちのウェブサイトがなぜ楽しくてユニークなのかを皆さんに知っていただくため、そして私たち自身の将来の参考のために、デザイン作業の根底にある哲学を書き留めています。

古き良きもの

ケモ・スターのウェブサイトデザインに適用している重要なルールの1つが、「古き良きもの」です。

どういうことかというと、昔のユーザーインターフェースのデザイン決定には、多くの知識や知恵が詰め込まれているということです。現代のデザイナーの多くはそれを無視し、代わりに流行りの見た目や、安価に実装できるものを追い求めているように見えます。 （正直なところ、そのほとんどは単にAppleがやっていることをそのまま真似しているだけです。）

これはWindows 2000です。 かなり時代遅れでシンプルに見えますが、画面のスペースを節約しつつ、すぐに内容を読み取れるようにするための、多くの細かなデザインの工夫が施されています。

ボタンは明確に縁取られており、ベベル（斜面）が押し込めることを示唆しています。 ボタンがコンパクトなのは、枠線があることで、曖昧になることなくコンパクトにできるからです。これにより、この小さな800×600ピクセルのディスプレイの貴重な画面スペースを節約しています。

（この記事の例はインタラクティブになっています。自由に操作して、ボタンをクリックしてみてください！クリックに対して視覚的に反応します。）

これを、単にボタンに背景色を適用するという、現代のデザインで一般的に行われている手法と比較してみてください。

これを見て、「でも、この方が見栄えが良いですよ！」と言うかもしれません。 しかし、これらの枠線をなくすことで、背景とのコントラストが大きく失われてしまっています。 コントラストがこれほど低いと、無効化されたボタンと機能しているボタンのコントラストをしっかりとつけるために細心の注意を払う必要もあります。今回の例ではそれを省略していますが、それはテキストからこれ以上コントラストを奪うと、ほとんど読めなくなってしまうからです。

設定ダイアログボックスでは、関連する機能が長方形の枠で囲まれ、視覚的に明確なグループに区切られています。 タブはノートのインデックスのような現実世界のタブに似ており、クリックすれば開けることを示唆しています。

これを、同じUIをより現代風にアレンジしたものと比較してみてください。 この特定のスケッチは、JiraやConfluenceといったAtlassianのUIからインスピレーションを得たものです。

もちろんこれは私がデザインしたものなので、自作自演（藁人形論法）のように見えるかもしれませんが、記憶にあるJiraのルック＆フィールからインスピレーションを得ようとしたものです。

より現代的なデザインにも良い点はあります。ラジオボタンがはるかに大きくてクリックしやすく、ホバースタイルによってマウスオーバー時にウィジェットがインタラクティブであることが伝わります。また、色を使うことでUIがより魅力的に見えます（最近のブランドのカラーパレットでは、青がかなり使い古されている気がしますが）。

しかし同時に、クリックせずにこれらがタブであるとどうやって見分ければいいのでしょうか？ 私はこのデザインを何度も何度も見てきましたが、なぜ誰もがこのデザインを選ぶのか、安上がりに作れる（デザインにかかる時間もコードの行数も少なく済む）ということ以外に理解できたためしがありません。ボタンについても同様です。

また、同じ視覚的階層を伝えるために、大量の余分なパディング（余白）を追加せざるを得ませんでした。 確かに線は少なくなりましたが、ユーザーが他の重要なものを配置できるはずの無駄な画面スペースがはるかに増えています。あるいは、デザイナーであるあなたが他の重要なものを配置できたはずのスペースです。

言うまでもなく、このUIには個性がありません。私が思いつく中で最もシンプルで、最も安っぽいものです。 Windows 2000風のUIを作成するよりもわずかに短い時間で作成できました。これは、既存のデザインを厳密に再現していなかったこともありますが、デザインに楽しさや遊び心が入り込む余地がなかったことも理由です。 すべての線が同じように見え、すべての色が平坦（フラット）です。純粋に実用的なだけで、作り手の声は何も伝わってきません。

いずれにせよ、現代のデザインは昔の有用な知識をたくさん捨て去ってしまう傾向があり、それは良くないことだと私は思います！ だからこそ私は、ケモ・スターが昔のデザインの知恵を心に留めておいてほしいと願っています。過去の世代が歩んできた道を。

Windows 2000は今日の基準からすれば見栄えが良くなく、私を満足させるほど遊び心もありませんが、当時のデザイナーたちは間違いなく自分たちのやっていることを理解していました。

スキューモーフィズムと遊び心

Windows 2000から10年後、AppleはiPhoneをリリースしました。2000年代初頭からハードウェアは大きく進歩し、現実世界の物体に似たリッチなスタイルのUIを表示することが可能になったのです。

これ以上高解像度のスクリーンショットは見つかりませんでしたし、AppleはiPhoneのダウングレードをさせてくれません…
それはともかくとして。

これはAppleの電話の初期のユーザーにとって素晴らしいことでした。なぜなら、タッチスクリーンと、現実の物体をどのように使うかという人々の知識との間に、認知的な架け橋を作ってくれたからです。 UIが本棚のような現実世界で既に使ったことのあるものに似ていたため、人々はより簡単にUIを理解することができました。

この概念は「スキューモーフィズム」と呼ばれます。UIデザインの文脈においては、UI要素を現実世界の物体のように見せることで、より親しみやすさを感じさせる手法を指します。

私の好みからすると少し派手で光沢がありすぎるとは思うものの、個人的にはこういった表現は視覚的にとても面白く見えることが多いと感じています。

つまり、ウェブサイトを公開するためのボタンを、「これは重要な機能です！」と叫んでいるような巨大な赤いボタンにしない理由なんて、本当にあるのでしょうか？

あるいは、ホームページにスマートフォンのリアルな描写を追加して、実際の時間に合わせて時計をライブで更新するようにしてみてはいかがでしょうか？ （これは私たちのホームページで実際にやっていることです！）

私にとって、こうしたちょっとした工夫は、UIをより遊び心のある、人間味のあるものにしてくれます。企業がますます方程式から人間を排除しようとしているこの世界において、そういったものがもっと必要だと私は感じています。 私たちから現実感が奪われつつある中、ケモ・スターはUIをより現実世界に結びつけようと試みています。私たちがどんなに美しい世界に生きているかを、誰も忘れないようにするためです

ボタン、スライダー、ノブといった発明品やちょっとした道具に溢れた世界。 ノギス、ホッチキス、スタンプ。 紙、封筒、ハサミ。 なんなら、ランプ、冷蔵庫、電子レンジのような大きなものまで。

私たちは、デザインを通してそんな世界を称賛したいのです。

実用主義と安定性

ケモ・スターのデザインは、ユーザーの邪魔にならないことを目指しているという点で、実用的（プラグマティック）です。 私たちは、あなたが目的を達成できるようにウェブサイトをデザインしています。つまり、必要な情報を見つけたり、やりたいタスクを実行したりするのを、できる限りシンプルに、スムーズに、そして最速で行えるようにサポートします。

私たちのお問い合わせフォームはその良い例で、入力項目をメールアドレス、任意での現在のウェブサイト、そして自由形式の問い合わせ内容のわずか数項目に絞ることで、ハードルを下げることを目指しました。 問い合わせにどの詳細を含めるかは、あなたが選べます。なぜなら、それを受け取るのは機械ではなく人間の集まりだからです。私たちはお客様のご要望を処理するために、件名やカテゴリー、あるいは名前や電話番号すら知る必要はありません。 必要があればこちらからお聞きします。重要なのは、形式的で融通の利かないお問い合わせフォームによって、あなたの足が止められてしまわないことなのです。

ケモ・スターのデザインは「安定」もしています。 2つの意味で、頑丈なコンクリートの土台のように安定しているのです。

1つ目は、タスクを実行しているときに、その土台が不安定なはしごのようにぐらつかないということです。 ウェブサイト上で何かを選択したときに、便利なオプションを提供しようとするポップアップが表示されたことはありませんか？ こうした小さなポップアップ、気を散らすもの、視覚的な障害物は、不安定な感覚を助長します。

過度なアニメーションも、そうした感覚を強めます。 私たちは、ビューポート（表示領域）に過度な動きをもたらさない範囲で、アニメーションを控えめに使用しています。 ボタンを押したときに、より豊かな操作感 (juice)を持たせるためにアニメーションさせることはありますが、ビュー（画面）全体のトランジション（切り替え）を引き起こすようなことはしません。そうした動きは安定感を損なわせ、操作を遅く感じさせるからです。 画面全体を動く要素が少なく、UIが静的であるほど良いのです。

以前、Googleカレンダーで複数の予定を調整する必要があったとき、詳細ウィンドウのちょっとしたスライドインアニメーションをいちいち待たなければならないことに、かなりイライラした覚えがあります。

私たちのデザインが安定しているもう1つの理由は、私たちがデザインを徹底的に考え抜いているからです。 「UIを刷新したい」「邪魔なものを減らしたい」と思い立ったというだけで、無意味にデザインが変更されることはありません。 私たちはころころと変えるのではなく、進化させることを好みます。

これはかなり保守的に聞こえるかもしれませんが、毎日何時間もコンピューターの前に座っているわけではない一般のユーザーにとっては、これが最善の策だと私たちは感じています。 必然的に、これによって私たちのUIはおそらくより早く時代遅れに見えるようになるでしょう。しかし、独自性があり他にはないデザインを作成することで、現在のトレンドにあまり左右されないようにし、それを軽減したいと考えています。

その同じユーザーが1年後に戻ってきてウェブサイトを編集しようと思ったとき、「ボタンがどこに行ったか」を探すためだけに、マニュアルを最初から最後まで読み直したくはないはずです。 最良のシナリオは、ボタンがどこにも行っていないこと、つまり、以前と同じ場所にあることなのです。

アクセシビリティと信頼性

多くの人にとって、アクセシビリティは障害を持つ人々を支援するといった、かなり限定された目的を持つもののように思えるかもしれませんが、現実には、ウェブアクセシビリティは私たち一人ひとりに関わる問題です。 例えば、古いスマートフォンやコンピューターを余儀なく使わされたり、通信環境の悪い場所でウェブを閲覧したりした経験はありませんか？

私たちは、そうした状況にある人々をウェブへのアクセスから締め出すわけにはいきません。だからこそ、私たちはアクセシビリティに真剣に取り組んでいます。 つまり、すべての要素においてコントラストを高くしてウェブサイトをデザインし、性能の低いハードウェアや低速なインターネット環境でウェブサイトをテストするということです。

人々が影響を受ける可能性のある条件は非常に多岐にわたるため、すべての人をカバーすることはできませんが、私たちは能力の及ぶ限り最善を尽くしています。

信頼性も関連する問題です。なぜなら、信頼性の低いウェブサイトもまた、利用不能（アクセシブルではない状態）になる可能性があるからです。 ちょうど今年、私はFedExでいくつか荷物を送る必要があったのですが、彼らのウェブサイトでの体験は、私がこれまでに経験した中で最悪で、最も利用しづらいもののひとつでした。 不可解なエラーのせいで半分くらいの時間はアカウントにログインすることすらできず、ログインできたとしても、ページがコンテンツを適切に表示しなかったため、モバイル端末からはウェブサイトにアクセスできませんでした。

予定の変更により、彼らの「直前」のオファーに何度も申し込み直さなければならず、その度に5つの荷物のサイズと重量を入力させられた挙句、再びログイン画面のエラーに直面する羽目になりました。

このようにして、信頼性の低さがアクセシビリティの問題へと発展するのです。そして私たちは、それを何としてでも避けたいと考えています。

ユーザーが、「ウェブサイトが動かない」という苦情をあなたに寄せるような事態を確実に防ぎたいのです。 私たちはそのことを大切に思い、しっかりと機能するものを作りたいと願っているからです。

以上が、ケモ・スターのデザインの本質です。 会社が成長するにつれて、さらに多くの実例やルールを添えた記事を今後も公開していくことになると思います。

もしこの哲学に沿ったウェブサイトの制作にご興味がありましたら、規模の大小は問いませんので、ぜひ私たちの提供するサービスをご覧ください。 ひょっとすると、ケモ・スターはあなたが自分のコンピューターをもっと好きになるきっかけとなる会社になれるかもしれません！