.../articles/
見ているものを知るための知識

見ているものを知るための知識

2019.11.20

デザインを考える時、よくPinterestやギャラリーサイトでリファレンスを探すのですが、他の人に見せたときに、自分が見てたポイントじゃないところを気にかけられることってよくあります。

色、イラスト・写真などのモチーフ(描かれて/写っているもの)、賑やかさ、みたいなポイントへのつっこみが多いとよく思います。「わかってないなー」という話ではなく、 「見えているもの」は同じなのに「見ているもの」が違う のは面白いな、という話です。

個人的には、上記のポイントは調整可能なものとして捉えることが多いです。リクエストに合わせて変えればいいかな、くらいに思っています。(関係ないけど極端に賑やかにするのは苦手です)


……ここで「エスキモー※は雪をあらわす52の呼び名をもっていた」みたいな話あったよなと思い出し、 ものの名前や現象、仕組みを知っていることで自分が見るものの解像度って変えることができるよね、それが面白いなと思うんすわ 的な話にしようと思ったんだけど、調べたらこれ別に本当に呼び分けてたわけじゃないみたいです。なにを信じたら良いのかわからん。調べるって大事ね。

エスキモーの雪の名前は何種類?【隙間リサーチ】 | ちりつもFILE (β

※ちなみに現在はエスキモーではなくイヌイットと表現するのが良いようです。
覚えていて検索したのがこの単語だったのでそう書いています。

↑この記事の最後の方の、

日本語では「雪」以外に「雪を指す言葉」はありませんが、「空から降ってくる水」を、その状態に応じて「雨」「霙」「雪」「雹」「霰」と呼び分けています。雪だけしか降らない地域や、雨だけしか降らない地域では、おそらくこのような複数の語幹での呼び分けは定着しないでしょう。

ここの部分はたしかにー!と思いました。日本語にも細かい呼び分けありましたね。

知っていればそれらを見分けることができ、知らなければそれらは同じものに見えるということは、 「見ている解像度が変わっている」 ってことなのかなと思います。


無理やり話を戻しますが、僕がデザインを見るときはまず始めに情報構造とスタイリングとコンテンツに分解します。

  • 情報構造   : 装飾的な要素を排除した文脈や文章構造
  • スタイリング : 余白、色、文字、図など見た目を装飾する部分
  • コンテンツ  : 中身、モチーフ。なにを見せているものなのか

コンテンツに適した情報構造なのか、情報構造に適したスタイリングなのか、みたいな分解をします。

装飾的な部分を見つけ出すことは見た目通りですが、情報構造はすこし慣れや知識が必要なのかもしれません。そのデザインをワイヤーフレームに戻したらどうなるか、とか、マークダウンで書いたらどうなるか、みたいに考えて見ていることが多いです。

これも大本の出典※がどれか見つからないのですが、 「ユーザー・エクスペリエンスのダイアグラム」 のような構造を分解して解説してくれている先人の知恵を拝借すると、より理解が進みます。

第1回 ユーザー・エクスペリエンスって何だ? | 日経 xTECH(クロステック)

スクリーンショット 2019-11-21 14.41.11引用:第1回 ユーザー・エクスペリエンスって何だ? | 日経 xTECH(クロステック) のキャプチャ

※ この「UX を構成する 5 つの段階を振り返る | UX TIMES」によると、『ウェブ戦略としての「ユーザーエクスペリエンス」』という著書に書かれているみたいです。ごめんなさい買って確かめてはないです。


ものを見た瞬間の、自分の感覚を信じることは大事だと思います。 同時に、なにを見てしまっているのかを疑い、さまざまな知識で解像度を補強していくことも大事かなと思います。

ウェブコンテンツをデザインするのは、「機能と情緒」「知識と感覚」みたいな相反しそうに見えるものが同居しているのが難しく、面白いところだと思います。

written by

.../article/

Articles

記事

経営層・リーダーのための生成AI活用 〜自走型DXのためのアプローチ〜

経営層・リーダーのための生成AI活用 〜自走型DXのためのアプローチ〜

生成AIを活用して、経営者やリーダー自身が課題抽出・打ち手検討を行える体制を構築する。 弊社が提供する“伴走型支援”と組み合わせることで、DX推進の質とスピードを飛躍的に高める方法をご紹介します。

AWS AmplifyにmonorepoのNext.js(App Router)をデプロイする

AWS AmplifyにmonorepoのNext.js(App Router)をデプロイする

monorepo管理しているNext.jsをAmplifyにデプロイしようとした際にいくつか躓く内容があったのでまとめておきます。

Laravel 日本一解りやすい全文検索のマイグレーション記載方法解説

Laravel 日本一解りやすい全文検索のマイグレーション記載方法解説

Laravel + MySQLで全文検索を実装する

リモートワーク・オンライン会議でも、スムーズに制作を進めるために大切なこと[資料編]

リモートワーク・オンライン会議でも、スムーズに制作を進めるために大切なこと[資料編]

コロナ禍の影響により、リモートワークの導入をおこなっている制作会社も多く、実際に弊社でも導入しています。

売れるECサイトデザインを作るために。参考にしたいおしゃれな事例の探し方。

売れるECサイトデザインを作るために。参考にしたいおしゃれな事例の探し方。

売れるECサイトのデザインは、「この形式」という決まりはありません。ECサイトで売り上げを上げるなら、しっかりとしたコンセプトと、コンセプトを決定するまでのリサーチが必要です。

Figmaでデザインのコミット履歴を残せるプラグイン【Thought Recorder】をリリースしました

Figmaでデザインのコミット履歴を残せるプラグイン【Thought Recorder】をリリースしました

Figmaを利用するWebデザイナーの助けになれると嬉しいです。使い方は本記事をご覧ください。

制作会社の考える、業務効率化ツールのおすすめ。個人でも使いやすいサービスなど。

制作会社の考える、業務効率化ツールのおすすめ。個人でも使いやすいサービスなど。

新型コロナウイルス感染拡大の影響で、リモートワークが主流になり、弊社でも週のほとんどは各自宅で作業をしています。

ECの構築方法、おすすめのECサービス。

ECの構築方法、おすすめのECサービス。

ファッションや家電、スーパーの買い物でさえもECサイトを利用することが当たり前になりました。加えて新型コロナウイルスの影響もあり、弊社にも「どんなプラットフォームを利用したら良いか」「どれくらいコストがかかるのか」などECに関するさまざまなご相談を頂きます。

Laravelのオブザーバーが便利だった

Laravelのオブザーバーが便利だった

オブザーバーを使って、モデルのCRUDイベントキャッチしようという試み

DX(デジタルトランスフォーメーション)の全体像をざっくり解説

DX(デジタルトランスフォーメーション)の全体像をざっくり解説

もはやバズワードと化したDXという言葉ですが、実際何を意味しているのか? どのようなことをしたらいいのか? といったことを相談されるようになってきたので、DXをイメージするための全体像をざっくり解説します。

すべての記事

お問い合わせ