週刊Webテク通信

2018年6月第1週号1位は、良いマイクロコピーを書く10個のヒント、気になるネタは、ドラえもんとおしゃべりできる「Clova Friends mini」発売へ

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

1. 10 Tips for Writing Great Microcopy | Design Shackhttps://designshack.net/articles/ux-design/10-tips-for-writing-great-microcopy/

良いマイクロコピーを書くヒントを10個紹介しています。

  1. ユーザーが何をすべきかを示す
  2. 簡潔にする
  3. 重要なコピーは常に表示する
  4. サイトのトーンに合わせる
  5. 専門用語を使わない
  6. 画像に関する情報はAltタグに入れる
  7. 適切なオプションを提供する
  8. 正しい場所にテキストを入れる
  9. 画像にした文字ではなく「テキスト」を使う
  10. 成功時とエラー時両方のメッセージを用意する
図1 良いマイクロコピーを書く10個のヒント
図1 良いマイクロコピーを書く10個のヒント

2. How Using White Space Improves Your Designs - Onextrapixelhttps://onextrapixel.com/how-using-white-space-improves-your-designs/

ホワイトスペースを使ってデザインを改善する方法を解説した記事です。

  1. 注目を集める
  2. 見た目での優先順位を決める
  3. グループに分ける
  4. 読みやすくする

ホワイトスペースに関する、以下の記事もありました。ホワイトスペースとネガティブスペースはほぼ同義語です。

図2 ホワイトスペースを使ってデザインを改善する方法
図2 ホワイトスペースを使ってデザインを改善する方法

3. 2018 Logo Trends | Articles | LogoLoungehttps://www.logolounge.com/articles/2018-logo-trends

2018年のロゴデザインのトレンドを、数多くの実例とともに紹介しています。

ロゴデザインのトレンドは振り子のように振れていて、スッキリした近代的ななものが流行った反動で、曲線的でレトロなデザインへと変化し始めているとのことです。

図3 2018年のロゴデザインのトレンド
図3 2018年のロゴデザインのトレンド

4. Exploring Dark and Gothic Trends in Web Design - 1stWebDesignerhttps://1stwebdesigner.com/dark-gothic-web-design/

暗くゴシック様式のウェブデザインの事例を紹介しています。

明るい色、スタンダードなフォント、空白をたくさん使うなどのミニマルで近代的なデザインが一般的な中、それらと差別化したデザインとして提案しています。

図4 暗くゴシック様式のウェブデザインの事例いろいろ
図4 暗くゴシック様式のウェブデザインの事例いろいろ

5. Build Multiple Stacking Sticky Sidebars with Pure CSS and Bootstrap 4 ― Scotchhttps://scotch.io/tutorials/build-multiple-stacking-sticky-sidebars-with-pure-css-and-bootstrap-4

スクロールしても残り続けるサイドバーを、スクリプトなどを使わずBootstrap 4とCSSだけで実装する方法を解説しています。

Multiple Stackingというのは、サイドバーにある複数の要素が順に固定されていくことを指しています。

図5 スクロールしても残り続けるサイドバーを実装する方法
図5 スクロールしても残り続けるサイドバーを実装する方法

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

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

さくっと作成、らく~に運営|One Page(ワンページ)https://one-page.cloud/

「One Page」は1ページもののウェブページを簡単に作成、公開できるサービスです。コーディングなどの知識がない普通の人でも、思い通りのページが作れることを目指しています。

ページ編集はパーツをドラッグ&ドロップして配置してから、文字や画像などを入れていきます。ちょっとAmeba Owndに似ていますが、One Pageの方が機能は豊富です。機能が豊富な分設定できる項目がいろいろあって、ウェブ制作の知識がない人は最初は戸惑うかもしれません。

パソコン上でブラウザ幅を狭めるとメインコンテンツ部分が半分のサイズになるのが気になりますが、スマホで見るとちゃんと表示されます。デザインにこだわりたい人をターゲットにしているようなので、ウェブデザイナーが時間やコストをかけずに作る案件にも使えるかもしれません。

図6 1ページもののウェブページを簡単に作成、公開できるサービス
図6 1ページもののウェブページを簡単に作成、公開できるサービス

おすすめ記事

記事・ニュース一覧