L&M個別オンライン教室~論理と数学とプログラミングのオンライン授業~L&M個別オンライン教室~論理と数学とプログラミングのオンライン授業~L&M個別オンライン教室~論理と数学とプログラミングのオンライン授業~

WEBサイトやアプリのデザイン

WEBサイトやアプリのデザインについて、一般論から考察をまとめておきます。

デザインとは、具現化された創作物の外形と定義したいと思います。

創作物とは、作成者の意思によって創作された物です。

したがって、作成者の意思の明確化こそ、創作物、引いてはより良いデザインの前提になります。

作成者の意思とは、例えば、作成者が感じた世界観、考えた思想、発見した機能などです。
良いデザインとは、これらの作成者の意思をその外形にしっかりと具現化したものと言えます。

WEBサイトとアプリ

WEBサイトとアプリは、コンピュータ画面上に表現されるわけですから、一つの枠組みとしてその構成要素を、
形、大きさ、色、位置、変化に分けられます。この形、大きさ、色、位置、変化を意識しつつ、WEBサイトとアプリで表現したい世界観と機能をより高めるデザインを追求すれば良いわけです。

WEBサイトの話に入ります。
WEBサイトの作成の前には、何をユーザーに伝えたいのか、その伝えたいことを徹底的に明確化する必要があります。伝えたいこととは、つまりコンテンツですが、コンテンツを明確化して初めて、それをデザインに反映することができ、ユーザーにデザインを通してコンテンツを伝えることができます。

コンテンツを明確化するとは、コンテンツを感じ、理解し、解釈し、分析/整理することです。
たとえば、コンテンツの核心となる魅力は何なのか、考え方は何なのか、どのような側面があるのか。コンテンツを分割することはできるのか、構成する要素は何か、カテゴリーはあるか、階層はあるか、重要度/順序関係はあるか、などなどです。感じ方/捉え方/考え方の手法や経験、直感を磨くことが大切です。物事を感じる感受性、整理する論理性と言ってしまっては簡略化しすぎかもしれませんが、、。

その後で、明確化されたコンテンツをユーザーに伝えるデザインの話に入ることができます。
ただデザインの段階と言っても、何かを新しく付加する作業ではなく、すでに明確化されたコンテンツをそのまま反映させる、そんなデザインこそが最良のデザインではないでしょうか。抽象的なコンテンツを具体的なデザインで表現するのですから、「そのまま」ということはありえませんが、デザインによってユーザーが抽象的なコンテンツをできる限り「そのまま」受け取れれば、それは最高のデザインと言えます。

たとえば、重要なものは、奇抜な形で、大きくし、目立つ色で、位置もトップにして、目につくような変化を加える。
コンテンツにカテゴリーがあれば、同じカテゴリーを位置的にまとめる。
同階層のコンテンツは同じ表現形式にする。
象徴するモチーフがあれば、バックグラウンドやヘッダーイメージに使う。
などなどで、明確化したコンテンツを、象徴的/比喩的/補助的にデザインとしてどう表現するかが大事で、その手法や経験、直感を磨くことが大切です。物事を置き換える表現力と言ってしまっては簡略化しすぎかもしれませんが、、。

具体的には、家具屋さんならそのビビっとくる商品をバックラウンドやロゴに使い、優先順位の高い商品ごとに並べ、カテゴリーごとに色分けし、商品情報と店舗情報の位置を分け、店舗名を大きなフォントでトップに、リードで店の客観的情報と主観的情報を出す、などなどです。

その上で、ボタンの押しやすさであったり、読みやすさであったり、全体に規則性を持たせるなどWEBサイトとしての機能性を付加することが必要です。

アプリの話に入ります。
アプリにはそれが実現しなければならない機能があるので、その機能を最大限に発揮できるデザインを求める必要があります。WEBサイトの機能性をより徹底的に追求することと言っても良いかもしれません。一方で、そのアプリが持つ世界観も魅力ですから、それを掴めずに公開、ということでは良いデザインとは言えません。

アプリの機能性とデザインについては、後日考察を行いたいと思います。
後日追加: アプリのデザインについて