週刊Webテク通信

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

ネットで見かけた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 フォームの作成/管理と顧客管理ができるサービス

おすすめ記事

記事・ニュース一覧