週刊Webテク通信

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

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

ネットで見かけた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 オンライン上でドキュメントを作成&共有できるサービス

今週の気になるWebネタ

Appleは,iPhone XRで3D Touchが失敗であることを認めた | TechCrunch Japanhttps://jp.techcrunch.com/2018/09/17/2018-09-14-the-iphone-xr-shows-apple-admitting-3d-touch-is-a-failure/

iPhone XRでは3D Touchが搭載されないとのことで,TechCrunchの記事ではAppleが失敗を認めたという論調で記事にしています。なお,原文の記事タイトルを直訳すると「iPhone XRはAppleが3D Touchの失敗を認めていることを示している」といった感じです。

確かに3D Touchを知らない人は多いでしょうし,この機能がなくなって困る人はほとんどいないと思われます。とはいえ,iPhone XRには3D Touchの代わりにHaptic touchという操作が追加されるそうなので,同様の操作はできるんですね。

Haptic touchは「長押し+触覚フィードバック」のようです。従来の長押しとどう区別されるのかなどよく分からないのですが,ともかく3D Touchで行えていた機能自体はiPhone XRでも使えるということのようです。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入