大辞泉はフラットデザインか? | HMDT Blog

大辞泉はフラットデザインか?


新しい『大辞泉』、あちらとかこちらとかで取り上げてもらって嬉しいけど、ソシャゲ風の課金の話が中心だよね、やっぱり。課金モデルは大きい話題だけど、それはアプリを使う上での入り口でしかない。『大辞泉』が『デジタル大辞泉』のバージョンアップではなく、まったく新しいアプリにしたのは、ユーザエクスペリエンスの分野でたくさんの変革を行ったからだ。そっちの方も、ポツポツと紹介してくね。

まずはデザインの話からいこうか。いま世の中では、iOS 7の登場を控えて、フラットデザインの話題がにぎやかだよね。iOS 7でフラットになるかどうかは噂でしかないけど、いままでのSkeuomorphismから変えてくるのはきっと確実だろう。

この、なんべん見てもスペルを覚えられない「Skeuomorphism」デザイン、現実世界をエミュレートしたデザインって意味らしいんだけど、いままでのiOSデザインの規範の1つであった。だから、『デジタル大辞泉』もそれを踏襲していた。特にiPad版ではその傾向が顕著。辞書の「本」としての形をそっくり模倣していたんだ。でも新しい『大辞泉』では、この路線はやめる事にした。

やめた理由は、トレンドとしてSkeuomorphismが衰退するということもあったけど、メインの理由は、どうしても複雑度が上がり拡張性が低くなってしまうから。たとえば、『デジタル大辞泉』のデザインでは、画面を切り替える「タブ」の機能を本の「爪」になぞらえたんだけど、これだとそのメタファーに引っ張られて数を増やすのが容易じゃないんだよね。だから、モダンなメニュー構造にした。

ただ、Skeuomorphismじゃないからフラットにしたのか?と言われると、それはちょっと違うかもしれない。確かに、結果としてフラットな感じにはなっている。でもこれは、別のデザインコンセプトによるものだ。それは、「脱テーブル」だ。

「テーブル」は、iOSのユーザインタフェースの中で最も基本的なものだ。あらゆるアプリで使われている。iOSアプリのデザインとは、テーブルをリッチに見せるものである、と言ってもいいかもしれない。『デジタル大辞泉』でも、検索された見出し語を表示するために使っていた。

新しい『大辞泉』では、見出し語と同時に語意も表示するという仕様にした。ということで、最初に考えたのはこんな感じのデザイン。

うーん、確かに語意も確認できるけどさ、なんかちっちゃいし、文字数も少ないから見づらいよな。じゃあ、もう少し行の高さを高くしてみるか。でもそれだと、語意が短いとスカスカになっちゃうし、一画面に表示できる量が減る。

ここで行の高さにしばられているのは、テーブルでは基本的にすべての行の高さが同じ、なのが前提になっているから。可変行高のテーブルも実現できるんだけど、パフォーマンスが著しく落ちる。辞書みたいに、1000行のテーブルが必要な場合は現実的ではない。

この段階で、テーブルを捨てることを決断した。そもそも、縦書きもやろうと考えていたんで、テーブルと相性が悪い事は分かっていた。どうにかしてごまかそうかと思っていたけど、決別した。

じゃあテーブルは使わないとして、もっと自由にデザインを考えたら、どんなのがいいだろう?他のアプリを参考にしたり、いろいろ検討したんだけど、最終的にたどり着いたのは、書籍の大辞泉の誌面だった。そう。紙の辞書の電子化を行っていたはずなのに、結局紙に帰ってきてしまった。

検索画面のデザインへの要求は、限られた画面領域に、見やすく多くの情報を詰め込むことだ。でも実はこれって、紙の辞書がずっと長い間やってきたことだった。その知見に敬意を払い、たくさん参考にさせてもらった。まず見出し語は太字のゴシック、表記は太字の明朝にする。改行せずに本文を続けて、太さはレギュラー。改行するときは、1文字分インデントする。字間も詰める。なるほど。見やすい。すげー見やすい。

この見た目を得ると、いままでのアプリ的なユーザインタフェースが野暮ったく見える。こんな見せ方をしていた時期もあったけど、やっぱやだよね、これ。

セパレータやディスクロージャが、邪魔に感じる。これらは項目が分かれている事を示すためにあるんだけど、タイポグラフィの力ですでにそれは実現されている。だから取っ払っちまえ。

できたー。うん?気付いてみたらフラットだな。ということで、脱テーブルの下あるべき姿を追い求めたら、結局フラットになっちゃった、てとこです。

大辞泉サポートページは、こちら
HMDT大辞泉Facebookページは、こちら

  1. コメントはまだありません。

  1. トラックバックはまだありません。