週刊Webテク通信

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

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

ネットで見かけた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ページもののウェブページを簡単に作成,公開できるサービス

今週の気になるWebネタ

ドラえもんとおしゃべりできる「Clova Friends mini」発売へ - ITmedia NEWShttp://www.itmedia.co.jp/news/articles/1805/31/news103.html

LINEのスマートスピーカー「Clova Friends」のミニサイズ版「Clova Friends mini」に,数量限定でドラえもんモデルも登場しました。

常にドラえもんの声でしゃべってくれるわけではなく,⁠ねえ Clova,ドラえもんに変わって」と話しかけることで,ドラえもんとおしゃべりできるとのこと。アニメのドラえもんの声で,ひみつ道具に関する会話や原作のせりふを話すそうです。

あくまでもドラえもんとの会話はオプション機能なんですね。Clovaには今のところボイスアプリを追加する機能がないのですが,ある意味追加アプリの第一弾と言えるのかもしれません。

著者プロフィール

芦之由(あしのよし)

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

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

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

バックナンバー

週刊Webテク通信

バックナンバー一覧

コメント

コメントの記入