週刊Webテク通信

2018年9月第3週号1位は、良いシングルページウェブサイトを作るテクニック、気になるネタは、Appleは、iPhone XRで3D Touchが失敗であることを認めた

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

1. Single-Page Website: Best Design Practices | Tubik Studiohttps://tubikstudio.com/single-page-website-best-design-practices/

シングルページウェブサイトの長所と短所、デザインするためのテクニックを紹介した記事です。

良いシングルページウェブサイトを作る最善の方法を、以下の項目に分けて解説しています。

  • テキストをセクションに分割する
  • 視覚的な階層構造を作る
  • パララックス(視差効果)に挑戦する
  • ほかのナビゲーション手段も追加する
  • (ボタンやフォームなどの)コールトゥアクションも含める
図1 良いシングルページウェブサイトを作るテクニック
図1 良いシングルページウェブサイトを作るテクニック

2. 7 Tips for Better Contact Form Design (With Examples) | Design Shackhttps://designshack.net/articles/ux-design/contact-form-design/

良い問合せフォームを作るためのヒントを7つ紹介しています。

  1. 1カラムにする
  2. 論理的にコンテンツをグループ分けする
  3. 入力欄の上にラベル(項目名)を配置する
  4. 多くの質問をし過ぎない
  5. 一目ですぐ分かるボタンを作る
  6. 適切なフィールドタイプを使う
  7. 可能であれば入力データの検証(メールアドレスのフォーマット、電話番号の桁数のチェックなど)をする
図2 良い問合せフォームを作るための7つのヒント
図2 良い問合せフォームを作るための7つのヒント

3. 5 App Design Tools - Nodes Design Stack 2018 ≫ Nodeshttps://www.nodesagency.com/nodes-design-stack-2018/

Nodesというアプリのデザインチームが実際に使っているデザインツールから、Sketch、Abstract、InVision、Zeplin、Principleの5つのツールの役割や特徴を解説しています。

それぞれのツールが、ビジュアルデザイン、バージョンコントロール、プロトタイピング、ハンドオフ(開発への橋渡し)のどの段階で使われるのかの紹介も参考になります。

図3 アプリデザインツールを5つ紹介
図3 アプリデザインツールを5つ紹介

4. Best Web Design Software - 2018 | Tech.Cohttps://tech.co/best-web-design-software-2018-09

優れたウェブデザインソフトウェアについての記事ですが、ウェブデザイナー向けではなく一般の人でも作れるツールを取り上げています。

この記事の評価では、Wix、weebly、Squarespaceがベスト3となっており、項目ごとの評価ポイントも掲載しています。

ほかにも11位までのウェブデザインソフトウェアが紹介されており、日本ではあまり聞かないものもいくつかありました。

図4 優れたウェブデザインソフトウェア
図4 優れたウェブデザインソフトウェア

5. Design Trend: Bubble & Blob Backgrounds | Design Shackhttps://designshack.net/articles/trends/bubble-background/

デザインのトレンドとして、泡や水滴のようなイメージを使った背景を取り上げています。

ほかの多くのトレンドと違い、泡の形にはいろいろあってどれも異なっていることが特徴です。

図5 泡や水滴のような背景を使ったデザイントレンド
図5 泡や水滴のような背景を使ったデザイントレンド

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

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

Drafty - A place to draft content, and then share it.https://drafty.app/

Draftyはオンライン上にドキュメントを作って共有できるシンプルなサービスです。原稿を管理し、人に確認してもらうことを目的としているようです。

ドキュメントは見出しやリンクの設定はできますが、画像を貼ることはできません。テキストを選択すると書式などのメニューが現れる、Mediumのような最近流行りのUIです。ドキュメントは、Drafts/In Review/Done(下書き/確認中/完了)の3段階で管理します。

機能はシンプルなので、チャットツールやタスク管理ツールなどと組み合わせて使うと良さそうです。URLが分かれば誰でもドキュメントにアクセスできるので、不特定多数に匿名でドキュメントを公開する用途にも便利だと思います。

図6 オンライン上でドキュメントを作成&共有できるサービス
図6 オンライン上でドキュメントを作成&共有できるサービス

おすすめ記事

記事・ニュース一覧