週刊Webテク通信

2018年5月第4週号 1位は,SketchによるUIデザイン制作をステップごとに紹介,気になるネタは,Instagram、フィードの投稿を自分のストーリーで共有可能に

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

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

1. Behind the Design Curtain: eCommerce Collection Pagehttps://medium.com/@jon.moore/behind-the-design-curtain-ecommerce-product-page-6e5cf4386197

ECサイトの商品一覧ページのUIデザインを元に,Sketchを使ったデザイン制作をステップごとに紹介しています。

各ポイントで,Sketchのテクニックとデザインプレゼンテーションのテクニックとが載っています。

Sketch用のデザインフレームワーク的存在のUX Power Toolsの人による記事です。

図1 UIデザイン制作をステップごとに紹介

図1 UIデザイン制作をステップごとに紹介

2. 7 Rules of Using Radio Buttons vs Drop-Down Menus – Prototyprhttps://blog.prototypr.io/7-rules-of-using-radio-buttons-vs-drop-down-menus-fddf50d312d1

ラジオボタンとドロップダウンメニューの使い分けを解説しています。

ラジオボタンを使うケース
  • 強調したい項目がある
  • 項目数が5個より少ない
  • 項目をわかりやすく比較する必要がある
  • 見やすさと早く選べることが重要
ドロップダウンメニューを使うケース
  • 最初の項目がおすすめ
  • 選択候補がたくさんある
  • 7個以上の項目がある

図2 ラジオボタンとドロップダウンメニューとの使い分け方

図2 ラジオボタンとドロップダウンメニューとの使い分け方

3. 7 typography trends in web design | Webflow Bloghttps://webflow.com/blog/7-typography-trends-in-web-design

タイポグラフィのトレンドを7つ紹介した記事です。

  1. 大きく大胆なテキスト
  2. セリフ体
  3. テキストだけで魅せる
  4. モノスペースフォント
  5. ハイライトしたテキストで目を引く
  6. 水平と垂直のテキスト
  7. 飛び散ったテキスト

    図3 タイポグラフィの7つのトレンド

    図3 タイポグラフィの7つのトレンド

    4. 10 Sleek Apple-Style Code Projects From CodePen - 1stWebDesignerhttps://1stwebdesigner.com/10-sleek-apple-style-code-projects-codepen/

    Appleのデザイン風のメニューなどを実現するコーディング例を,いくつかまとめた記事です。

    モバイルのハンバーガーメニューやメッセンジャーのフキダシなど,Apple風デザインのコード例をCodePenから紹介しています。

    図4 Apple風デザインのコーディング例いろいろ

    図4 Apple風デザインのコーディング例いろいろ

    5. Custom List Number Styling | CSS-Trickshttps://css-tricks.com/custom-list-number-styling/

    番号付きリストをCSSでデザインするテクニック集です。

    番号部分をスタイリングする設定方法は基本的には同じで,あとはどうデザインするかですね。

    図5 番号付きリストをCSSでデザインするテクニック集

    図5 番号付きリストをCSSでデザインするテクニック集

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

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

    CSS Grid Layout Interface Builder | LayoutIt!https://www.layoutit.com/grid

    CSS Gridによるグリッドレイアウトを作成するサービスです。このツール上で確認できるのはCSSのコードだけですが,HTMLとCSSがセットになったファイルをダウンロードできます。

    まず,横方向と縦方向に分割する個数を決め,それぞれのサイズを単位とともに指定します。そして,コンテンツ領域を選択して名前を付けると,それぞれが「grid-area」として設定されます。

    オプションのチェックを入れると,IE10/11に対応した「-ms」のベンダープレフィックスの付いたコードも生成できます。思い通りに設定するにはCSS Gridの知識が必要ですが,CSS Gridの勉強にも使えそうです。

    図6 CSS Gridによるグリッドレイアウトのビルダー

    図6 CSS Gridによるグリッドレイアウトのビルダー

    今週の気になるWebネタ

    Instagram,フィードの投稿を自分のストーリーで共有可能に - CNET Japanhttps://japan.cnet.com/article/35119365/

    Instagramでフィードの投稿を簡単にストーリーに追加できるようになりました。これまでも投稿を友達に直接送るシェア機能はあったのですが,ストーリー上にも共有可能になったということですね。

    ストーリーばかり見ている人が増えたので,自分の投稿をストーリーに載せて宣伝する用途に使う人も多そうです。また,これまでInstagramにはなかったシェア機能として利用され,新たなアカウントを発見するきっかけとして機能しそうです。

    なお,最近はストーリーのUIを真似したものが増えており,Netflixのモバイルアプリにも同様のUIが搭載されたとのこと。このボタンレスUIは,自力で操作法を発見できない人もいそうですが,慣れると直感的だと思える面白いUIだと思っています。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入