ユニバーサル社会で役立つデザインや技術の研究
子供が手裏剣のクッキーを作りたいというので、３Dプリンターで型を作ることにしました。モデリングデータはご自由にお使いください。
手裏剣の型を作る際、中央の穴をどうするか考えました。
２つに型を分解する方法と、つなげて１つの型にする方法があります。
今回は手裏剣の中央に正確に穴をあけられよう、つなげて１つの型にしました。
３Dプリントします。
思い通りにできるか、実際にクッキーを焼いて試してみます。
生地の片抜きは良い感じです。
手裏剣に見えます。
焼き上がりました。
成功です。
投げて遊ばないよう、子供に注意しましょう。
クッキーの生地を厚さ5㎜で伸ばす際、均等に平らにするにはどうすればよいか？単純に厚さ5mmの棒を2つ３Dプリントして解決しました。
面白い商品があります。「めちゃラク クッキーミックス」です。
一般的なクッキーミックスは、生地を混ぜるのに、けっこう力がいります。
しかしこの「めちゃラク クッキーミックス」なら、幼児など、手の力が弱い人でも作りやすい。ユニバーサルデザインの商品です。
作り方は簡単。まず水を大さじ１杯入れます。
そして、振ります。
その後、揉みます。
以上で生地はできました。
ここで最大の難関が訪れます。
生地を厚さ５mmに伸ばすよう、説明書に書かれています。
力は必要ないですが、テクニックが必要。
まあ、てきとうでいいとは思いますが、今回は品質にこだわりましょう。
簡単かつ上手に生地を伸ばす方法を考えます。
生地を５mmに伸ばすということは、伸ばし棒と台の間に５mmの隙間を常に作ればよいということです。
厚さ５mmの棒を２つ、モデリングしました。
単純すぎる造形なので、一瞬でできます。
フィラメントはPLAを使用。印刷後の収縮が小さく、寸法が安定する素材です。
さっそく３Dプリントした５mm棒を使ってみます。
生地の両側に棒を置き、その上から伸ばし棒を転がします。
うまくいきました。
親は（道具を作る以外）手を出さず、子供たちが自力で、厚さ５mmの生地を作ることができました。
オーブンレンジで焼きます。
子供たちが、見事に均等な厚みのクッキーを作りました。
Custom Post Type UIを使って、WordPressの管理画面から投稿タイプを指定できるようにしました。テンプレート側では投稿取得（get_posts）の際、パラメータでスラッグ指定が必要です。備忘録のため記録します。
一つのWordPressで、複数の種類の記事を扱う場合があります。
例えば「お知らせ」「商品紹介」というように、根本的に入力形式が違う場合、投稿画面を分けるという選択肢があります。
方法として、プラグイン「Custom Post Type UI」が便利です。
新規投稿タイプを追加します。
ここでは、
投稿タイプスラッグ・・・info
複数形のラベル・・・お知らせ
単数形のラベル・・・お知らせ
と入力します。
単数と複数でラベルを変える概念が日本語にはないので、一緒でOKです。
この「info」と名付けた投稿タイプスラッグの投稿を取得するには、get_postsのパラメータに’post_type’ => ‘info’を指定します。
|
1 2 3 4 5 6 |
$args = array( 'post_type' => 'info', //カスタム投稿スラッグ ); $posts = get_posts($args); //$posts にカスタム投稿スラッグ「info」が格納される |
初歩的な内容ですが、備忘録として記録します。
Webページのファーストビューの縦幅は550px。このエリアにどんな情報を置くかは、サイトがページ回遊型か、スクロール型かで決まってきます。しかし、最近、もう一つの型があるのでは・・・と感じるようになりました。
Amazonに代表される、情報を複数ページにわたって探していくサイト。
この場合のファーストビューを見ていきます。
購入商品を悩み、複数のページを回遊することが考えられます。
そのため、ファーストビューには重要な情報が揃っています。
商品画像、商品名、レビュー、値段、配送日、カートに入れるボタン。
ストレスなく商品を見比べることのできる、使い勝手に優れたデザインです。
情報を探したい、比べたいという欲求には、ファーストビューに情報を詰め込むタイプのデザインが適切です。
同じECサイトでも楽天は逆で、商品を比べさせずに勢いで買わせてしまうデザインかと思います。
楽天や、LP（商品紹介をする長いページ）のようなスクロールして見るページでは、ファーストビューにアイキャッチ画像、キャッチコピーを入れるのが鉄則です。
しかし最近、スクロール型のファーストビューで、自分が鉄則だと思っていたデザインが崩れる経験をしました。
noteです。ファーストビューはアイキャッチ画像のみ。
記事をイメージできない抽象的なアイキャッチ画像しか表示されないこともあります。
しかし、スクロールして読んでしまいます。
ちなみに昔はタイトルの文字までファーストビューにはいっていました。
アイキャッチ画像の画角変更で、タイトル文字が550px以内に収まらなくなったようです。
意図的にファーストビューを画像のみにしたわけではなさそうですが、アクセス解析の結果、画像だけでもページの読まれ方に影響はなかったと思われます。
noteのページに行くと、私は100％スクロールしているような気がします。
多くの場合、Googleの検索結果からnoteへ飛んできます。
そして、読みたい内容がファーストビューにないので、スクロールします。
この判断が1秒を切っていることが重要だと思います。
とにかくnoteは余計なものがないシンプルなデザインなので、即座に情報がないと脳が判断し、指先にスクロールしろと指示が行きます。もう反射です。
もし、キャッチコピーやバナーのような様々な画像が出てきたら、それらの情報が必要かどうかを考えて、離脱するかを判断するでしょう。
noteのページでスクロールを始めてしまうと、そのまま慣性の法則が働くようです。
もう、戻るボタンとか押さずに、そのまま下へ下へと動きたくなる、物理パワーを感じてしまいます。
スクロール以外の行動をとるのが面倒になるのか？
それとも読みやすいデザインだから、スクロールが止まらないのか？
どちらにしても、ファーストビューに重要な情報を入れるという鉄則が破られ、スクロールを前程とした、あたらしいデザインの形だと思います。
見比べる必要もない、勢いも必要ない、ただ読んでもらいたい良質なコンテンツを見せるなら、note型のファーストビューを選択しても良いと思います。
ただし、読みやすさやページ表示速度まで気にかける必要があるのでご注意ください。
アイキャッチ画像がなかなか表示されないページであれば、普通に離脱します。
ファーストビューに限らず、noteのデザインは作り込まれています。
もう、情報発信サイトのデザインを頼まれても、「noteを使ってください」と、紹介したくなってしまいます。
PCのファーストビューのサイズは、この10年間変化がありません。今後も大きな変化は見られないと予測しています。
ブラウザでWebサイトにアクセスしたとき、スクロールなしで表示できる領域のことをファーストビューと言います。
PCサイトのファーストビューのサイズは、1000px×550px。
レスポンシブデザインが主流になり、横のレイアウトが可変するため、縦の高さ550pxのみ、注目することが多いです。
ファーストビューのサイズは10年間変わりません。
ファーストビューは何pxまで？ ブラウザの表示領域サイズ5年間の変化を大公開を見ると、2010年の時点で、ファーストビューのサイズが1000px×550pxとなっています。
私自身、何回か検証用のスクリプトを仕込んだことがありますが、若年層ユーザーが多いサイトでも、高齢者層ユーザーが多いサイトでも、ファーストビューサイズに差はありませんでした。
大きいディスプレイが普及しても、全画面でブラウザを開かない場合は多いようです。
ユーザーの見やすい表示領域というのは、変化しにくいものなのかもしれません。ブラウザが大きいほど、戻るやタブ操作での視線移動やカーソル移動が疲れるので。
ファーストビューの目安を書きました。しかし、Webデザインをするときに、1000px×550pxに詰め込めばいいという話ではありません。
前回のGoogleトップ、前々回のAppleのトップを見ても、吟味した１つのものをファーストビューに表示させています。
もちろんサイトの種類によって、ファーストビューに必要な情報は異なります。
意外なファーストビューの使い方もありました。
1998年から2020年のGoogleトップページを2年おきに比較します。世界最大のWebサービスで、デザインの変化を学びます。サービスが増えていくにもかかわらずシンプルになっていくことが驚きです。
まだBETA版のGoogle。Yahoo!と同じく感嘆符付きでした。
この時はエメラルドグリーンのような背景色が一部ついていて、Googleの歴史で一番色があったころです。
ロゴの文字が太くて立体的で、ゴツゴツしています。
中央のGoogleロゴが、左にずれています。
ロゴの右には「About Google」。
まだ自分たちが何者か、目立つところに配置する必要があったようです。
なお、BETA版よりシンプルになり、ロゴもスリムになりました。
Googleのロゴが中央になっています。
新たにタブデザインの導入です。
数年タブデザインが続いたので、記憶に残っている人もいるでしょう。
そして画像検索という強力な機能が追加されました。
※画像検索は2001年にサービス開始
大きなデザインの変化はありません。
しかし、Googleニュースが始まっています。
Googleのサービスが拡大していきます。
表面的なデザインとしては、タブデザインをやめています。
ただの青文字下線リンクとなり、UIデザインの統一を図ったようです。
サービスはさらに増え、moreのボタンが登場します。
また、Googleアカウントが登場し、Sign inのリンクも追加されました。
検索ボックス周辺に増えていったメニューを、左上に移動しました。
主力サービスの検索の邪魔にならないようにデザインが改善されています。
そしてGmailやGoogleマップといった人気サービスも追加されています。
検索の入力ボックスや検索ボタンが一回り大きくなりました。
操作性が上がっています。
メニューにはVideosが追加されています。
検索と他サービスを明確に分けるよう、黒いヘッダーが登場しました。
そして長年変わらなかったGoogleロゴが見直されます。
細かく追っていくと、2010年の途中でロゴは変わっていました。立体感が弱くなり、影も小さくなりました。
ついにロゴの立体感が消えました。キャプチャは2014年ですが、1年前の2013年にロゴをフラットデザインに変更したようです。
メニューにはYouTubeやDriveといった強力なサービスが追加されます。
2016年のキャプチャを見ると、またロゴが見直されています。
2015年にロゴの視認性を上げるため、ロゴの文字を太く丸くしたようです。
ロゴ以外の変更はありませんでした。PCよりスマホに注力していたと思われます。
黒いヘッダーがなくなり、メニューもほとんど隠れました。
ユーザーの選択肢を減らすため、MapとかYouTubeとかの有名サービスを隠してしまいました。
検索は音声入力に対応。
大きな変化はありません。検索ボックスが丸くなりました。
細かいところを言えば、ブラウザのサイズで余白が変わるようになりました。
ブラウザの縦幅が小さい時、ロゴが小さくなり、上部の余白が無くなります。
きめ細かいデザインの配慮です。
22年間並べてみて驚愕なのが、サービスが増えていくにもかかわらず、デザインがシンプルになっていくことです。
組織が大きくなり、サービスが増えると、トップページで土地の争いが起こるものです。「自分の部署のサービスをもっと目立つように！」とか・・・。
Googleがシンプルで居続けられるのは、創業時から受け継ぐ強い信念があるからだと考えられます。
現在は情報過多の時代なので、よりシンプルなデザインをユーザーからは求められるでしょう。
Googleのデザインが参考になればと願います。
AppleのWebサイトのブラウザを縦方向に縮めると、縦方向の余白が調整されました。ファーストビューで商品を見せるこだわりを感じます。そのこだわりは、調べてみると予想以上のものでした。
AppleのWebサイトは、CSSのメディアクエリが細かく指定されています。
横幅によって見た目が変わる「レスポンシブWebデザイン」は、Web制作者には一般的です。
しかしAppleは、横幅だけではなく、縦幅でもデザインが変化します。
冒頭のキャプチャ画像を再度掲載します。
ブラウザの縦幅を変えたAppleのトップページを並べました。
まず、見出し（iPhone SEの文字）の上の余白が変わっているのが分かります。
ブラウザの縦が743px以下であれば53px。734px以上では65px。
指定が細かいですね。
さらにその下のiPhone画像。メディアクエリの指定が尋常じゃないです。
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 1068px) and (min-height: 734px) and (min-width: 735px), only screen and (max-width: 1068px) and (min-height: 734px) and (min-resolution: 1.5dppx) and (min-width: 735px), only screen and (max-width: 1068px) and (min-height: 734px) and (min-resolution: 144dpi) and (min-width: 735px)
縦・横・解像度の組み合わせにより、表示される画像や余白が変わります。
商品の見せ方への強いこだわりを感じます。
1px単位で、細かく縦方向の余白を変更させている理由を考えます。
これはただ美しい余白を追い求めているだけではなく、もっと合理的な理由がありそうです。
ファーストビューで一般的に言われる550pxにブラウザサイズを変更してみました。
すると、iPhoneの商品写真がピッタリとおさまりました。
たまたまではないでしょう。
ファーストビューで商品を見せるこだわりです。
表面的な部分を称賛されるAppleのデザイン。実は裏側がすごいので、調べてみると勉強になります。
noteが究極的に読みやすい話と、マクドナルドのシンボルカラーが消えていく話から、アプリやWebデザインにおけるヘッダーの背景色を考察します。鮮やかな色を使うのは避け、まずは白の検討をお勧めします。
2014年、マテリアルデザインが流行りだしたころ、鮮やかな単色で塗りつぶされたヘッダーが、Webサイトやアプリで多く見られるようになりました。
YouTubeの赤いヘッダーとか、強烈な色で、不快に感じたのを覚えています。今は白いヘッダーに改善されています。
ヘッダーの色は、単純にシンボルカラー、ブランドカラーを使えばいいというわけではありません。コンテンツを引き立てる色や、コンテンツの邪魔にならない色を選ぶのが良いでしょう。
ブロガーの徳力基彦氏の記事で、「どうもnoteに書くと、普通のブログサービスより明らかに記事が読まれる気がする」というものがあります。
noteとLINE BLOGで同じ内容を書いたら、はてなブックマークで10倍以上の差がついたとのことです。
noteが今ほどドメインパワーを持っていなかったころの話。
noteの記事が読まれた要因の一つとして、徳力氏はヘッダーデザインを上げていました。
要素として違うのは、ヘッダーデザインぐらいだと思いますが、実はここが大きな違いを産んでる可能性があるわけです。
ヘッダーを比べたのがこちらです。
上がnote、下がLINE BLOG。
LINE BLOGのヘッダーの方が美しいかもしれませんが、noteの方が読み手にやさしく、実は優れたデザインです。
多くのWebサービスがヘッダーを白に変えました。
さらにマクドナルドまでが、シンボルカラーを使わず、白いヘッダーにしている時代です。
Webサイトやアプリをデザインするうえで、少しでもヘッダーの色が邪魔をしていると感じるのであれば、白を選択するのが良いと思われます。
最近Webで情報を検索している時、noteの記事をよく見かけます。このnoteの画面がとにかく読みやすい！繰り返し行われるデザインのカイゼンに加え、お金の流れをデザインしていることが、読みやすさの要因に感じます。
noteの使い方、機能紹介から引用します。
noteはクリエイターが文章や画像、音声、動画を投稿して、ユーザーがそのコンテンツを楽しんで応援できるメディアプラットフォームです。
閲覧するだけの人にとっては、ブログサービスのように見えるかもしれません。
読みやすいようにデザインされているから、とにかく読みやすい。
読みやすさ、使いやすさを繰り返し検証して、カイゼンしています。
年間100を越えるカイゼン施策（PDCA）を行っているようです。
ただ、もっとも気になったのが広告がないこと。
これが読みやすさの大きな要因です。
既存のプラットフォームの多くは、広告で収益を上げています。
企業である以上、利益を上げていくことは、間違いではありません。
ページ右側に広告を出したり、記事の間に広告を挟んだり、広告と気づかれないように記事の中に溶け込ませたり・・・。
邪魔だよなと思いつつ、広告のクリックやコンバージョンが上がるようにカイゼン？していきます。
広告の文字もABテストを行い、より過激な文字をギリギリまで探っていきます。
このやり方は、いずれ限界が来ると、多くの人は感じていたと思います。
広告のないWebサービスもあります。公共サイトです。
しかし、実際は予算運営の公共サービスの方が、圧倒的にお金に縛られます。
予算が下りなければカイゼンできない上、スピードが出せない。
noteがこれだけ読みやすくデザインされているのは、お金のデザインも含めて優れているからだと思います。
最高に読みやすいデザインを作るには、広告にも予算にも依存しないことが重要と感じます。
「デザイン経営」で言われる分野で、noteは見た目のデザインだけではなく、経営レベルでデザインを考えているはずです。
noteのマネタイズの戦略を詳しく調べてみることにしました。
東京新聞にあったnote創業者のインタビューを拝見しました。
違和感なく使ってもらうため、画面は極力シンプルに。コンテンツを引き立たせるため広告も入れない。
コンテンツを第一に考える理念から、noteのデザインは生まれたようです。
それと同時に外部との資本業務提携で、経営基盤を作っています。
参考にしようとして、手軽にマネはきるものではありません。
ただ、「コンテンツを引き立てるためには何をすればいいか？自分のデザインがコンテンツを殺さないか？」個人レベルでも、何度も自分に問いかける癖は付けられると思います。
外食産業が壊滅的なダメージを受ける中、売り上げを伸ばしたマクドナルド。実店舗集客ができない状況下、アプリやWebでどのような戦略をとったのか？今回はデザインに焦点を当てて検証します。シンボルカラーの使い方に興味深い変化が見られました。
2020年9月、マクドナルド公式ページの「よくあるご質問」から引用します。
創業当時より赤と黄色をシンボルカラーとしています。
あれ？シンボルカラーは？
公式サイトに赤がなく、昔と比べてずいぶん味気なくなりました。
2016年のデザインと比較してみましょう。
まずはアプリ。
※2016年のキャプチャ（AppBankより転載）と2020年9月のキャプチャ
続いてWebサイトのトップページ。
※2016年のキャプチャと2020年9月のキャプチャ
掲載する商品で印象が変わるため、ロゴやメニューの配色のみを比較します。
すると、驚くほどシンボルカラーの赤が無くなっていることに気づきます。
赤は刺激が強すぎて、サイト閲覧の邪魔になるから無くしたのでしょう。
これは実店舗と同じです。
赤い看板は集客に使えます。しかし店内が鮮やかな赤だったら・・・落ち着いて飲食できません。
店内をGoogle画像検索で調べると、ナチュラルな落ち着いた色となっています。
Webサイトでも、もう訪問しているなら、激しい赤を使う必要はありません。
落ち着いて商品を選べる配色が良いです。
厳密にはWebサイトの場合、リラックスするより情報を探す欲求の方がユーザーは強いので、ナチュラルな配色より、情報を最速で探せる白背景が適していると言えそうです。
ひとつ気になるのが色彩心理。
赤は、食欲を増進させる色と言われます。
それを白くて味気ないデザインに変更し、マイナスの効果はないのでしょうか？
10年くらい前、色彩心理とWebアクセスの相関を、統計を使ってテストしたことがありました。
その時は、悲しいほど色彩心理とアクセスに相関がないという結果になりました。
アクセスが上がるのはコンテンツが見やすくなる配色。背景はただの白や無彩色、補色が効果的でした。
この法則は、どうやら外食産業にも当てはまるようです。
アプリやWebサイトから赤が消えたのは３・4年前のことです。
明確なカラー戦略を持っていると思われます。
そして、コロナ禍の3月下旬、マクドナルドのWebサイトがさらに進化しました。
背景で大面積で使われていた、もう一つのシンボルカラー黄色も減らしてきました。
非常に理にかなったデザインにリニューアルされています。
スマホサイトを見ながら、上から順に詳しく見ていきます。
コーポレートサイトとしての役割を重視したのでしょう。安全・安心を訴えかけるソーシャル・ディスタンスが最初に表示されます。
コロナで特殊な状態のため、一見シンボルカラーが復活したように見えましたが、そうではありません。
黄色のソーシャル・ディスタンスのパネルは、平常時にハンバーガーの写真に差し替わり、その下にある赤い「特別なお知らせ」という項目も平常時に消えるでしょう。
続いて下にスクロールすると、おすすめメニューの一覧がでてくるようになりました。ページ遷移が減り、おいしそうなハンバーガーを、すぐに選べるようになりました。
今までのフラットデザインは、どこがタップできるのか分かりずらいデザインだったのですが、リニューアル後、影のついたカード型UIに変更になっています。
いわゆるフラットデザイン2.0に進化しています。
明らかに選択や操作がしやすいです。
引き続きスクロールすると、一番驚く、大きな変化を見られます。
黄色で楽しい演出をしていた、新着情報やキャンペーンが、恐ろしくシンプルなカード型UIに変更されています。
マクドナルドの内情は知りませんが、一般的にシンプルなデザインを通すのは、決裁に膨大なエネルギーを使います。
表面的に楽しそうで、キレイなデザインの方が、何十倍も決裁を通しやすいです。
マクドナルドはデザイナーがすごいのか？決裁者がすごいのか・・・、このデザインでリニューアルが通ったことが、一番の驚きです。
新着情報からキャンペーンまでのデザインが興味深く、今度はPC版でも見てみたくなりました。
こちらが2020年3月までのデザイン。
そして今度は、リニューアル後のデザインです。
驚くほどの変貌。
コントラスト不足だった新着情報の黄色の日付が、黒（#2d2d2d）に。
日付のWebフォント「LovinSansBold」と、本文の「游ゴシック」は、Chromeの標準フォント「メイリオ」に置き換わっています。
標準が何より読みやすいです。
そして、黄色く大面積で塗りつぶされていたキャンペーン部分。
黄色が目立ちすぎて、コンテンツ（商品）を殺していた状態が解消されました。
シンボルカラーも無視して、味気ないデザインを通すのは、Webデザイナーにとって至難の業です。
しかし、美しく装飾することに気を使って、売り上げを下げるデザインをすると、最終的に誰もが損をします。
シンプルなデザインで稟議を通すのが難しい場合、コロナ禍で売り上げを伸ばしたマクドナルドのデザインを事例に使うのが、一つの手だと思います。