週刊Webテク通信

2017年8月第1週号 1位は,モバイルUXのためにコンテンツ最適化する7つの方法,気になるネタはAdobe「Flash」を2020年末に終了へ

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

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

1. 7 Ways to Adapt Content for Better Mobile UX | Design Shackhttps://designshack.net/articles/ux-design/7-ways-to-adapt-content-for-better-mobile-ux/

より良いモバイルUXのために,コンテンツ最適化する7つの方法を紹介しています。

  1. 1画面で1つのことしか考えさせない
  2. ナビゲーションに優先順位を付ける
  3. 検索エンジンのように考える
  4. 文字を大きく
  5. 意味のある少量のテキストを書く
  6. モバイル向けに不要な要素を取り除く
  7. モバイル環境での画面サイズなどの規模に適応させる

図1 モバイルUXのためにコンテンツ最適化する7つの方法

図1 モバイルUXのためにコンテンツ最適化する7つの方法

2. Mobile UI Design: Basic Types of Screens. – UX Planethttps://uxplanet.org/mobile-ui-design-basic-types-of-screens-aa1857e31339

モバイルUIデザインにおける基本的な画面のタイプをまとめています。

一般的な画面
  • スプラッシュスクリーン
  • 初心者向けのチュートリアル画面
  • ホーム&メニュー画面
  • ログイン&プロフィール画面
  • 統計画面
  • カレンダー
Eコマース
  • カタログ画面
  • 商品カード画面
  • 決済画面
ソーシャル
  • フィード
  • 連絡先
音楽
  • プレイリスト
  • プレイヤー

図2 モバイルUIデザインにおける画面タイプいろいろ

図2 モバイルUIデザインにおける画面タイプいろいろ

3. 25 Web Designs With Clever Fixed Header Effectshttps://line25.com/articles/25-web-designs-with-clever-fixed-header-effects

固定ヘッダの実例をまとめた記事です。スクロールとともにアニメーションで現れたり消えたりするなど,いろいろなパターンの固定ヘッダを大量に紹介しています。

固定ヘッダは便利ですが画面上部のスペースを常に使うため,スクロールとともに小さくなるものが多いようです。スクロールすると背景色が付くヘッダも目立ちました。

図3 固定ヘッダの実例のまとめ

図3 固定ヘッダの実例のまとめ

4. 5 CSS Properties That You Probably Don't Knowhttp://developer.telerik.com/topics/web-development/5-css-properties-probably-still-dont-know/

新しいCSSのプロパティを5つ紹介しています。

  1. font-display(Webフォントがダウンロードされる間のテキストのレンダリングをコントロール)
  2. contain(描画の最適化に関するプロパティ)
  3. writing-mode(縦書きや右から左の横書きなど書字モードを指定)
  4. clip-path(画像を好きな形に切り抜く)
  5. will-change(描画の最適化に関するプロパティ)

図4 新しいCSSのプロパティを5つ紹介

図4 新しいCSSのプロパティを5つ紹介

5. Shoelace.css: a back to the basics CSS starter kithttps://shoelace.style/

CSSフレームワークですが,これをベースにカスタマイズするためのスターターキットです。

グリッドシステムは用意されていません。CSS GridとFlexboxの使用が現実的になってきたので,グリッドレイアウト機能を持たないフロントエンドフレームワークが今後増えていくのでしょう。

図5 CSSのスターターキット

図5 CSSのスターターキット

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

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

Grabienthttps://www.grabient.com/

グラデーションを作成し,CSSのコードを取得できるWebサービスです。また,あらかじめ用意されたグラデーションのセットをSketch形式でダウンロードできます。

用意されたグラデーションを編集することで新規のグラデーションを作ります。色の変更や追加,角度や色と色との間隔の調整が可能です。CSSのコードはプリフィックスも付けられます。

ユーザーインターフェイスが非常に良く,省スペースにうまく要素を配置していて感心します。特に,3つ以上の色がある場合に不要な色をドラッグすると,色を追加する+ボタンがゴミ箱に変化するところが素晴らしいと思いました。

図6 CSSグラデーションを作成するサービス

図6 CSSグラデーションを作成するサービス

今週の気になるWebネタ

Adobe,「Flash」を2020年末に終了へ - ITmedia NEWShttp://www.itmedia.co.jp/news/articles/1707/26/news044.html

AdobeがWebブラウザ用のFlash Playerの開発と提供を,2020年末に終了すると発表しました。ついにFlashの長い歴史が,東京オリンピックと共に終焉を迎えるんですね。

Flash技術などをベースにデスクトップ/モバイルのアプリを開発するためのAdobe AIRは,今後も開発を継続するとのこと。Adobe Animateは2015年にFlashから名称変更したアプリですが,こちらも継続すると明記されているそうです。

iPhoneでの不採用からケチが付き始めた印象のあるFlashですが,やはりモバイル化の流れに適応するのは難しかったんじゃないでしょうか。すでにiPhoneでフラッシュといえばLEDフラッシュですが,Flashという言葉の意味が一つ消えるのが寂しく感じられます。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入