週刊Webテク通信

2017年8月第4週号 1位は,分割画面ホームページのデザインテクニック,気になるネタは,Facebook、不評のストーリーカメラを強化。ライブ、GIF動画、テキストを追加

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

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

1. 4 Ways To Design a Perfect Split Screen Homepage | Webdesigner Depothttps://www.webdesignerdepot.com/2017/08/4-ways-to-design-a-perfect-split-screen-homepage/

分割画面ホームページのデザインテクニックについて解説しています。

  1. 鮮やかな色とドラマチックなタイポグラフィ
  2. 行動喚起のボタンに注目が集まるようにする
  3. 分割された画面間に視覚的な流れを作る
  4. 行動を促すためにアニメーションを利用する

ウェブデザインのトレンドとして話題になることが増えてきた分割画面のページデザインですが,レスポンシブデザインにも有効で,モバイル画面では縦に積み重ねることができるとのことでした。

図1 分割画面ホームページのデザインテクニック

図1 分割画面ホームページのデザインテクニック

2. 6 Web Design Trends You Should Forget - With Exampleshttps://webdesignledger.com/6-web-design-trends-you-should-forget/

忘れるべきWebデザインの6つのトレンドをまとめた記事です。

  1. Flash
  2. カルーセル
  3. Comic Sansフォント
  4. 工事中ページ
  5. ドラマチックなドロップシャドウ
  6. ベベルとエンボス

カルーセル(画像がスライドで切り替わるもの)は今でもよく使われていますが,ユーザビリティに難があるので使わない方がいいとのことです。その理由として,以下の3項目が挙げられています。

  • 自動的に切り替わるスライドはユーザーが制御しにくい
  • バナー画像と同様,無意識のうちに無視されやすい
  • すぐに切り替わってしまうのでテキストが読めない

図2 忘れるべきWebデザインの6つのトレンド

図2 忘れるべきWebデザインの6つのトレンド

3. 10 mistakes in landing page design – Design Leadership – Mediumhttps://medium.com/design-leadership/10-mistakes-in-landing-page-design-7aace4fe41fc

ランディングページデザインの10個のミスをまとめています。

  1. 動作のきっかけとなる要素を過度に使用する
  2. バナー画像
  3. 大きなかたまりのテキスト
  4. 読めないテキスト
  5. ユーモアが多すぎる
  6. 色を使いすぎる
  7. 突然のコマーシャル動画,予期しない音
  8. ポップアップが多すぎる
  9. プリローダー
  10. 品質が悪い写真やストックフォト

図3 ランディングページデザインの10個のミス

図3 ランディングページデザインの10個のミス

4. 30 Inventive Website Footer Designshttp://www.webdesigndev.com/30-inventive-website-footer-designs/

新発想のフッターデザインのギャラリーです。掲載画像はフッタ部分だけなので,ぜひ実際のウェブサイトで見て欲しいとのことです。

フッターの要素としては,著作権表記,連絡先情報,ソーシャルメディアへのリンクが多いですが,それらをうまくデザインしている例や,その他の要素を加えているものなど30の例が掲載されています。

図4 新発想のフッターデザインのギャラリー

図4 新発想のフッターデザインのギャラリー

5. 10 Fascinating Examples of Wireframes in Web Designhttps://1stwebdesigner.com/wireframes-web-design/

ウェブデザインにおけるワイヤーフレームの魅力的な例を紹介しています。

手描きのもの,ツールを使って作ったものがあります。ツールとしては,Balsamiq,Figma,Sketchが一般的なようです。

図5 ワイヤーフレームの魅力的な例いろいろ

図5 ワイヤーフレームの魅力的な例いろいろ

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

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

無料で使えるメールフォームと顧客管理 | formrun(フォームラン)https://form.run/ja

formrunはフォームの作成/管理ができるツールで,同時にフォーム送信者の顧客管理もできるところが便利です。日本のスタートアップが開発したもので,日本製というところも安心できます。

テンプレートを使ってフォームを簡単に作成・公開できますし,HTMLとCSSで自由に作成して別サイトに設置することも可能です。バリデーション用のJavaScriptが用意されているので,HTMLのコーディングだけでバリデーションを行えます。

デザインも操作性も良く,フォーム作成/管理サービスの決定版になりそうな予感がします。ひとつ気になるのは確認画面がなくて即送信されることです。クライアントワークでは確認画面が求められるケースが多いので,対応を期待したいです。

図6 フォームの作成/管理と顧客管理ができるサービス

図6 フォームの作成/管理と顧客管理ができるサービス

今週の気になるWebネタ

Facebook,不評のストーリーカメラを強化。ライブ,GIF動画,テキストを追加 | TechCrunch Japanhttp://jp.techcrunch.com/2017/08/16/20170815facebook-camera-gifs-live/

Facebookのストーリー機能(カメラ機能)が強化され,ライブ中継,2秒間のGIF動画撮影,背景色付きフルスクリーンテキスト作成機能が追加されました。GIF動画機能は,わたしの環境ではまだ使えないようです。

この記事ではFacebookのストーリー機能が不評とありますが,確かにわたしの周りでも使っている人がほとんどいませんし,存在そのものが知られていないように思えます。

Instagramでは同様のストーリー機能が流行っており,わたしもInstagramで使ってみると面白かったので,Facebookでも使い始めました。投稿とは別扱いで24時間で消えるので,⁠○○なう」的な写真や動画を気軽にアップできるのが気に入っています。認知されればおじさん・おばさんにも流行ると思います。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入