週刊Webテク通信

2018年11月第2週号 1位は,ハンバーガーメニューとメガメニューを組み合わせたサイトデザインの実例,気になるネタは,第2世代「Apple Pencil」はワイヤレス充電対応,側面タップでツール切り替え

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

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

1. The Hamburger & Mega-Menu Combination Design Trendhttps://speckyboy.com/hamburger-mega-menus/

ハンバーガーメニューとメガメニューを組み合わせたサイトデザインの実例をまとめた記事です。

批判もあるけれど利便性も高く,なんだかんだで生き残ってきたハンバーガーメニュー。モバイル向けを前提としたシンプルなメニューが多かったのですが,最近はPCの全画面用に凝ったメニューも増えてきています。

そこで,ハンバーガーメニュー&メガメニュー(項目が多かったりサイズが大きいメニュー)を使っているサイトの中から,デザイン的に優れたものを紹介しています。

図1 ハンバーガーメニューとメガメニューを組み合わせたサイトデザインいろいろ

図1 ハンバーガーメニューとメガメニューを組み合わせたサイトデザインいろいろ

2. Mobile Patterns - UI UX Inspirational Gallery for iOS and Androidhttps://www.mobile-patterns.com/

モバイルアプリのUI/UXの事例がたくさん見られるギャラリーサイトです。

アプリのカテゴリ,行うアクション,ナビゲーションの種類,⁠ロード中などの)状態など,いろいろな観点から絞り込めます。

登録されているほとんどの画面イメージは動画になっていて,操作イメージがわかりやすいです。カーソルを合わせるだけで再生されるのも便利です。

図2 モバイルアプリのUI/UXのギャラリーサイト

図2 モバイルアプリのUI/UXのギャラリーサイト

3. Free Styleguide Templates for Your Web Projects - 1stWebDesignerhttps://1stwebdesigner.com/free-styleguide-templates/

スタイルガイドを作るためのサービスやテンプレート素材を紹介しています。

大きく分けると,デザインの初期段階でクライアントと確認するためのものと,実際の制作時にデザイナーと開発者で使うものの2種類あります。

図3 スタイルガイドを作るためのサービスやテンプレート

図3 スタイルガイドを作るためのサービスやテンプレート

4. Learning the basics of Adobe XD in one hour – DRILL – Mediumhttps://medium.com/drill/learning-the-basics-of-adobe-xd-in-one-hour-3537f3ac02a3

Adobe XDの使い方を,初心者向けに解説した記事です。

  • プレビューを見る
  • スプラッシュスクリーンを作る
  • プロフィール画像を選ぶ
  • ブログ記事のリストを増やす
  • スクロール
  • インタラクティブ性を設定
  • プロトタイプを共有してフィードバックをもらう
  • 画像を書き出す

図4 初心者向けのAdobe XDの使い方

図4 初心者向けのAdobe XDの使い方

5. A design tool that is also a developer tool. Introducing profiles in Hadron.https://blog.prototypr.io/a-design-tool-that-is-also-a-developer-tool-introducing-profiles-in-hadron-c04537d159a8

開発ツールでもあるデザインツール「Hadron」の紹介記事です。

デザイナービューとデベロッパービューがあり,デザイナービューでは,SketchやAdobe XDのような操作感でデザインできます。

また,デベロッパービューでは,ブラウザのデベロッパーツールのようにプレビューを見ながらHTML,CSSなどのコードを書けます。

現在まだプレビューバージョンで,早期アクセスのリクエストを受け付けています。

図5 開発ツールでもあるデザインツール「Hadron」の紹介

図5 開発ツールでもあるデザインツール「Hadron」の紹介

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

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

Promomatic - Easily create beautiful app store assetshttps://www.promomatic.com/

Promomaticは,アプリの紹介画像を簡単に作れるサービスです。App StoreやGoogle Play ストアのアプリ紹介に使える画像を生成できます。

スクリーンショットの画像ファイルさえあれば,スマホの画面にハメコミ合成して,キャッチコピーなどのテキストを入れたデザインを作れます。背景色や背景画像,フォント,テキストサイズ,テキスト色など細かくカスタマイズできます。

完成した画像を高解像度でダウンロードするのは有料です。料金表には1つ2ドルと書いてありますが,実際にやってみると1ドルと表示されました。期間限定で1ドルなのかもしれません。アプリストアのアプリ紹介だけでなく,ソーシャルメディアで使う画像用に使っても便利だと思います。

図6 アプリの紹介画像を簡単に作れるサービス

図6 アプリの紹介画像を簡単に作れるサービス

今週の気になるWebネタ

第2世代「Apple Pencil」はワイヤレス充電対応,側面タップでツール切り替え - CNET Japanhttps://japan.cnet.com/article/35127854/

ついに新型iPad Proが発表され,Apple Pencilも新しくなりました。旧型との互換性はなく,旧機種のiPad Proでは新Apple Pencilは使えず,逆に新iPad Proでは旧Apple Pencilは使えないそうです。

第二世代Apple Pencilのポイントは,iPadに磁石でくっつきワイヤレス充電されること。キャップを外してLightningポートに挿すこれまでの充電方法は不評だったので,うれしい進化と歓迎されています。

また,Apple Pencilをダブルタップするジェスチャー操作も追加されました。アプリ側の対応次第で,ペンから消しゴムに切り替えるなどができるわけです。AdobeからiPad用のPhotoshop完全版とイラスト制作アプリの登場も控えており,クリエイティブワークにiPad Proを使う人がますます増えそうですね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入