週刊Webテク通信

2018年5月第2週号1位は、デザインの構成要素を、数値ではなく見た目で調整する方法、気になるネタは、VR180カメラからYouTubeにライブストリーミングができるモバイルアプリが登場

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

1. Optical adjustments in components – Prototyprhttps://blog.prototypr.io/optical-adjustments-in-components-a7f1f8655e0

デザインの構成要素を、数値ではなく見た目で調整する方法を紹介しています。

位置揃えにしろ色にしろ、数値でぴったり揃えても人間の見た感覚では違和感がある場合があります。そのへんを丁寧に調整していく作業の解説です。

本文を読まなくても、画像を順に見ていくだけでだいたい理解できるという面で良い記事です。

図1 デザインの構成要素を見た目で調整する方法
図1 デザインの構成要素を見た目で調整する方法

2. Why You Should Never Center or Right Align Your Logohttp://uxmovement.com/navigation/why-you-should-never-center-or-right-align-your-logo/

ウェブページのロゴを中央揃え/右揃えにしてはいけない理由を解説しています。

右に配置するのはともかく、センターはアリではないかと思いましたが、ユーザーは左上のロゴをクリックしてホームに戻るという習慣があるため良くないとのこと。

代わりに上部ナビゲーションバーの一番左に、ホームに戻るボタンを入れるのは有効とのことでした。

図2 ロゴを中央揃え/右揃えにしてはいけない理由
図2 ロゴを中央揃え/右揃えにしてはいけない理由

3. The Ultimate Guide to Font Sizes in UI Design – Learn UI Designhttps://learnui.design/blog/ultimate-guide-font-sizes-ui-design.html

UIデザインにおけるフォントサイズについてまとめた、⁠完全ガイド」を謳った記事です。

iPhone、iPad、マテリアルデザイン(モバイル/デスクトップ⁠⁠、モバイルウェブ、デスクトップウェブに分けて解説しており、原則と参照リンク集もあります。

図3 UIデザインにおけるフォントサイズの完全ガイド
図3 UIデザインにおけるフォントサイズの完全ガイド

4. gridtoflex.comhttp://www.gridtoflex.com/

まずFlexboxで記述し、CSS Gridが使える環境ではCSS Gridが適用されるようにする、⁠Fallback」の考え方での記述方法を紹介した記事です。

良く使われるレイアウト4つでの記述例が載っています。gridareaの名前に絵文字を使っているところが面白いですね。

図4 CSS Gridで記述しつつ未対応ブラウザにはFlexboxを使うテクニック
図4 CSS Gridで記述しつつ未対応ブラウザにはFlexboxを使うテクニック

5. Responsive Knockout Text With Looping Video | CSS-Trickshttps://css-tricks.com/responsive-knockout-text-with-looping-video/

画面サイズに合わせて可変する、文字の形でマスクをかけた動画をCSSで実装しています。

文字はSVGにしてマスクとして使い、レスポンシブにどんなサイズでも見られるサンプルがCodePen上にあります。

図5 文字の形でマスクをかけたレスポンシブな動画
図5 文字の形でマスクをかけたレスポンシブな動画

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

おすすめ記事

記事・ニュース一覧