週刊Webテク通信

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

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

ネットで見かけた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 文字の形でマスクをかけたレスポンシブな動画

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

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入