ユニバーサル社会で役立つデザインや技術の研究
手持ちの電動空気入れという商品があるようです。小さくて頼りないのですが・・・まずは浮き輪を本当に膨らませられるか検証します。
立て続けに自転車の空気入れが壊れ、良い空気入れがないか探していました。
すると、たまたま電動空気入れというものを見つけ、試しに購入。
手に握れる小さいサイズ。本当に空気を入れられるのか？
すでに自転車のタイヤは、お店で空気を入れてしまったので、家にあった膨らむおもちゃや浮き輪で試します。
充電した電動空気入れにスイッチを入れます。
空気が入っていく！しかし、けっこうな音がします。うるさいです。
続いて浮き輪にも試します。
幼児が片手で空気を入れられます。
楽なのは確かです。
空気の入り方は、期待したほど早くはないです。
大きなビニールプールを膨らませるような使い方には向かないと思います。
浮き輪がしっかり膨らみました。
電動空気入れが使いもになるか懸念がありましたが、悪くはないようです。
今度は自転車で試します。
三男（園児）の作る独創的な料理。「卵焼きの錦糸卵添え」を紹介します。料理本にも載っていない、創造性あふれる料理です。
三男は卵が大好きなので、卵料理を得意としています。
卵焼きの横に、錦糸卵を添えるとは、また斬新な。
コレステロールたっぷり。
せっかく作ってくれたので、食べようと思ったら・・・
三男が自分で全部、食べてしまいました。
通常は家族のために料理するのですが、おいしそうなものができると自分で食べてしまいます。
うちの四人兄弟、三男だけが体が丸くなっていきます・・・。
料理好きな三男（園児）が、今日も独創的な料理を披露してくれます。三男からは「キッチンに立ち入り禁止！」と言われ、料理が運ばれるのを楽しみに待ちます。
運ばれてきた料理は、あいかわらず独創的でした。
のりをかけた卵豆腐のまわりに、炒めたニンジンが並んでいます。
ニンジンの切り方が大胆なこと。
おいしいかどうかはさておき、盛り付けに創造性を感じます。
夜行性のヤモリは日中岩陰に隠れています。普段は見えず、岩を飾っているようなものです。それではさみしいので、少し景観をオシャレにします。水槽用の城のオブジェがちょうど良いです。
子供たちが捕まえてくるヤモリが日に日に増え、全部で7匹となりました。
水槽に土を入れて飼っていますが、日中は岩陰に隠れて出てきません。
岩をどけるとヤモリたちがうじゃうじゃ。
日中、岩しか見えないのはさみしい・・・。
そこでAmazonで古城のオブジェを購入。本来は水槽の水に沈めて使うものです。
ヤモリが登れるし、隠れられる。
ヤモリの住処には適しているでしょう。
中は空洞で、収容力もあります。
水槽に古城を設置しました。
苔で囲むと雰囲気が出ます。
昼にもかかわらず、ヤモリが外に出て城を登っていました。
古城のオブジェはインテリアになり、ヤモリの住処や、遊び場にもなるようです。
子供が手裏剣のクッキーを作りたいというので、３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のデザインが参考になればと願います。