週刊Webテク通信

2018年5月第3週号 1位は,カード型コンポーネントの構造やスタイル,動作などを解説,気になるネタは,デジタルカメラの歴史を築いたブランドが消える - カシオの撤退

この記事を読むのに必要な時間:およそ 2.5 分

ネットで見かけたWebテク(Webテクニック・Webテクノロジー)記事から,Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は,2018年5月7日~5月13日の間に見つけた記事のベスト5です。

1. Cards and Composability in Design Systems – EightShapes – Mediumhttps://medium.com/eightshapes-llc/cards-and-composability-in-design-systems-8845ecbee50e

カード型コンポーネントの構造やコンテンツ,スタイル,動作などを説明した記事です。

どういう画像が入るのか,テキストの長さはどのくらいか,どういうアクション(ボタン)が必要とされるのかなどを考えながら,カード型コンポーネントを設計していく考え方を解説しています。

特定の要素(たとえば画像,概要文など)がない場合にどうするか,横幅が可変した場合を考慮する,背景色が違う場合にも見やすくするなど,考えるべきポイントが分かります。

図1 カード型コンポーネントのデザインシステムについて

図1 カード型コンポーネントのデザインシステムについて

2. Why You Should Never Use Pure Black for Text or Backgroundshttp://uxmovement.com/content/why-you-should-never-use-pure-black-for-text-or-backgrounds/

ウェブデザインのテキストと背景色に,完全な黒を使わない方が良い理由をまとめた記事です。

100%の黒と白とではコントラストが大きすぎて目の疲れや不快感を引き起こすため,白背景に濃いグレーの文字,濃いグレーの背景に明るいグレーの文字といった組み合わせが良いと解説しています。

color contrast checker(カラーコントラストチェッカー)という,WCAG 2.0の業界標準に基づいて色のコントラストをチェックできるツールの紹介もあります。しかし,色のコントラストが低すぎることはチェックできても,高すぎるかどうかはチェックできないので,制作者が判断するしかないとのことでした。

図2 ウェブデザインのテキストと背景色に完全な黒を使わない方が良い理由

図2 ウェブデザインのテキストと背景色に完全な黒を使わない方が良い理由

3. 10 Code Snippets for Creating Masonry Grid Layoutshttps://speckyboy.com/snippets-masonry-grid-layouts/

Pinterestのようなレンガ組レイアウトのコードスニペットを紹介しています。

以前はJavaScriptを使っていましたが,今ではCSSだけでも実現できるようになりました。

図3 レンガ組レイアウトのコードスニペット集

図3 レンガ組レイアウトのコードスニペット集

4. 20 Responsive Image Galleries and Slideshows (2018) - Hongkiathttps://www.hongkiat.com/blog/free-responsive-image-gallery/

レスポンシブな画像ギャラリーやスライダーをまとめています。ウェブ,スマホの両方に最適化されたものが揃っています。

JavaScriptのフレームワークを設置するのではなく,デスクトップアプリやオンラインアプリでスライドショーを作ってから埋め込むタイプのものもありました。

クライアントが自分で作りたいという場合は,そういうビルダータイプのものを使って,できたコードをCMSに貼り付けるというワークフローが作れそうです。

図4 レスポンシブな画像ギャラリー&スライダー

図4 レスポンシブな画像ギャラリー&スライダー

5. 18 Twitter Accounts Every Web Designer Should Follow in 2018 | Webdesigner Depothttps://www.webdesignerdepot.com/2018/05/18-twitter-accounts-every-web-designer-should-follow-in-2018/

ウェブデザイナーがフォローすべきツイッターアカウントを18個紹介しています。

UXデザイナーを名乗っている人が多いところから,今のトレンドを感じました。

図5 フォローすべきツイッターアカウント18選

図5 フォローすべきツイッターアカウント18選

そのほか,最近の記事の中から,気になるニュース記事を紹介します。

先週の気になるWebサービス

Product Timelines http://www.producttimelines.com/

Twitter,Facebook,Slackなどの有名プロダクトで,いつどんな機能が付いたかなどの歴史を時系列で見られるサービスです。9個のプロダクトそれぞれの歴史をタイムライン表示で紹介しています。

年表が横軸に表示され,年表内の項目を選ぶと画像や動画と解説文が表示されます。年表は拡大/縮小して横軸のサイズを変えられます。スマホでもフリックして見られますが,あまり快適ではありませんでした。

この年表表示は,Timeline JSというツールで作っています。Google スプレッドシートを使ってデータを用意すれば,この形式の年表を簡単に作れるようです。また,JSONのスキルがあれば自由にカスタマイズできると書いてありました。

図6 Twitter,Facebookなど有名プロダクトの年表

図6 Twitter,Facebookなど有名プロダクトの年表

今週の気になるWebネタ

デジタルカメラの歴史を築いたブランドが消える - カシオの撤退 | マイナビニュースhttps://news.mynavi.jp/article/20180511-629500/

カシオ計算機がコンシューマ向けコンパクトデジタルカメラ事業からの撤退を発表しました。1995年に世界初の液晶モニター付きデジタルカメラ「QV-10」を発売したメーカーということで,話題となっています。

撮った写真がすぐにモニタで見られる,不要な写真を消せるといった今では当たり前なことも,QV-10の出た当初は画期的でした。ファインダーがなく液晶を見ながら撮影することと,カメラ部分が回転することから,カメラを低い位置に構えて撮影できることも新鮮だったことを覚えています。

スマホの普及でコンパクトデジカメが売れなくなり,国内のほとんどのカメラメーカーがコンパクトカメラの開発・販売を辞めている中,カシオの経営判断もしょうがないのでしょう。なお,コンシューマー向けからは撤退しますが,デジタルカメラ事業からの完全撤退ではなく研究開発も継続されるそうです。

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては,以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URLhttp://www.rgs680.com/dwt/

コメント

コメントの記入