週刊Webテク通信

2016年10月第1週号 1位は,Webデザインのトレンドとトレンド別のプロトタイプの作り方,気になるネタは,Twitterの「モーメント」,誰でも作成可能に

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

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

1. 5 web design trends and how to prototype them | Creative Bloqhttp://www.creativebloq.com/features/5-web-design-trends-and-how-to-prototype-them

Webデザインのトレンドと,そのデザインのプロトタイプの作り方について解説した記事です。

  1. マテリアルデザイン
  2. フラットデザイン
  3. カードレイアウト
  4. 視差スクロール
  5. イラスト

それぞれのデザイントレンドでのプロトタイプ作成に関して,推奨ツールの紹介や,ヒント,注意点などが掲載されていました。

図1 Webデザインのトレンドとプロトタイプの作り方

図1 Webデザインのトレンドとプロトタイプの作り方

2. Web Development Concepts All Web Designers Should Understand - Hongkiathttp://www.hongkiat.com/blog/web-dev-concepts-for-designers/

Webデザイナーが理解しておく必要がある,Web開発のコンセプトをまとめています。

  • フロントエンドのコードの動作
  • レスポンシブのテクニック
  • デザインをモジュールで考える
  • Retinaディスプレイ向け画像とSVGの理解
  • アクセシビリティの理解

図2 Webデザイナーが理解すべきWeb開発のコンセプト

図2 Webデザイナーが理解すべきWeb開発のコンセプト

3. Things you can learn from redesignshttps://uxdesign.cc/what-i-learned-from-redesign-journey-b866d8267eca#.acjvdgiel

デザインリニューアルから学ぶことをまとめた,かなりボリュームのある記事です。

リニューアルの流れを以下の項目で解説しています。

  1. リサーチ
  2. なぜリニューアルが必要か
  3. スケッチ
  4. ユーザーテスト 第1弾
  5. デザインを繰り返し練る
  6. さらにスケッチ
  7. ユーザーテスト 第2弾
  8. デザインをさらに繰り返し練る
  9. 開発
  10. 最後のステップ

図3 デザインリニューアルから学ぶこと

図3 デザインリニューアルから学ぶこと

4. 20 Web Design Industry Terms for the Clueless Client - Hongkiathttp://www.hongkiat.com/blog/web-design-industry-terms/

Webデザイン業界の用語を,クライアントに分かるように解説しています。日本語では定着した訳語がないものもありますね。

  1. アニメーション
  2. パンくず
  3. clutter(クラッター,乱雑・混乱)
  4. カラースキーム
  5. コントラスト
  6. Empty State(何もない状態)
  7. 固定レイアウト
  8. フラットデザイン
  9. 可変レイアウト
  10. 折り目
  11. Graceful Degradation(グレイスフル・デグラデーション,モダンブラウザを基準にし,古いブラウザには必要最低限の機能を提供する)
  12. ヒーローイメージ
  13. ランディングページ
  14. 遅延読み込み
  15. メディアクエリ
  16. Progressive Enhancement(プログレッシブ・エンハンスメント,全てのブラウザを対象にして,モダンブラウザ向けにはよりリッチなデザインや機能を提供する)
  17. レスポンシブデザイン
  18. スキューモーフィズム
  19. トランジション
  20. ホワイトスペース

図4 Webデザイン業界の用語をクライアントに分かるように解説

図4 Webデザイン業界の用語をクライアントに分かるように解説

5. 20 Websites with Remarkable Home Pageshttp://line25.com/inspiration/20-websites-remarkable-home-pages

注目すべきトップページを持つWebデザインのギャラリーです。ブランドを反映したトップページで訪問者の興味を引くことが重要とのことです。

なお,日本ではWebサイトのことをホームページといいますが,アメリカではトップページのことをホームページと呼ぶことを再確認できる記事でもありました。

図5 注目すべきトップページを持つWebデザインのギャラリー

図5 注目すべきトップページを持つWebデザインのギャラリー

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

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

Adioma - Knowledge Visualization Toolhttps://adioma.com/

Adiomaは簡単にインフォグラフィックスを作成できるWebサービスです。テンプレートを元にインフォグラフィックスを作成し,画像やベクター形式ファイル(svg)でダウンロードできます。

用意されたレイアウト上で,アイコンと文字を変更するだけと,シンプルで自由度は低いです。色も用意されたカラースキームから選ぶようになっており,デザインが苦手な人でも簡単にきれいなインフォグラフィックスが作れるという狙いなのでしょう。

日本語を入力した場合プレビューには反映されるのですが,ファイルとしてダウンロードすると日本語部分は消えていました。現状日本語は使えないと考えた方がよさそうです。有料版があり,高解像度の画像をダウンロードするには月39ドルのプロ版,ベクター形式でダウンロードするには月299ドルのビジネス版を利用する必要があります。

図6 簡単にインフォグラフィックスを作成できるサービス

図6 簡単にインフォグラフィックスを作成できるサービス

今週の気になるWebネタ

Twitterの「モーメント」,誰でも作成可能に - CNET Japanhttp://japan.cnet.com/news/service/35089748/

Twitterにモーメントという新機能が搭載され,複数のツイートをまとめた記事が作れるようになりました。日本では「Togetter(トゥギャッター)のようなことが公式機能でできるようになった」と言うと分かりやすいと思います。

Twitterには最近また買収の噂が出ており,買収先としてGoogle,セールスフォース,ディズニー,マイクロソフトなどの名前も挙がっています。日本での人気が高いのは,Togetterのおかげという面もあるのかもしれません。

公式でまとめ機能が付いたといっても,TogetterやNaverまとめも,簡単に廃れるということはないでしょう。しかし,それらサービスのアカウントを持っていない,新規でまとめを作ろうという人には,やはり公式のモーメント機能を使うほうが安心感があるはずですよね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入