週刊Webテク通信

2018年3月第1週号1位は、デザインを改善するための7つの実践的ヒント、気になるネタは、Twitter、複数アカウントによる同じツイートやいいねを規制へ

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

1. 7 Practical Tips for Cheating at Design – Refactoring UI – Mediumhttps://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886

デザインを改善するための7つの実践的ヒントをまとめています。

  1. サイズの変更ではなく色と太さで見た目の階層構造を作る
  2. 色つきの背景にはグレーのテキストを使用しない
    • 2-1.白いテキストの不透明度を下げる
    • 2-2.背景色にあわせて手動で色を選ぶ
  3. 影にオフセットを追加する
  4. ボーダーをなるべく使わない
    • 4-1. ボックスの影を使用する
    • 4-2.2つの異なる背景色を使用する
    • 4-3.大きなスペースを追加する
  5. 小さく使うためデザインされたアイコンを大きく使わない
  6. やわらいかいデザインにするため色付きの線をアクセントに使う
  7. すべてのボタンに背景色が必要なわけではない
図1 デザインを改善するための7つのヒント
図1 デザインを改善するための7つのヒント

2. Navigation Design: Is the Vertical Menu the New Best Practice? | NOUPEhttps://www.noupe.com/design/navigation-design-vertical-menu-new-best-practice.html

垂直メニューのナビゲーションが新たな最適解であるかについて、考えるヒントとなる記事です。

スマートフォンの画面は幅ではなく高さが増える傾向にあり、垂直方向のナビゲーションの方が理にかなっている。デスクトップにおいても、垂直方向のナビゲーションを使い、ハンバーガーメニューで隠すのではなく常に表示する方が良い。といったことを解説しています。

図2 垂直メニューのナビゲーションは新たな最適解か?
図2 垂直メニューのナビゲーションは新たな最適解か?

3. Call for Attention. UI Design Tips on CTA Buttons. – UX Planethttps://uxplanet.org/call-for-attention-ui-design-tips-on-cta-buttons-5239413aded2

注目を集めアクションを促すボタンのための、UIデザインのヒントをまとめた記事です。

以下の項目に分けて解説しています。

  • サイズ
  • 色と形
  • 場所
  • テキスト

「色と形」については、それぞれの色や形がどういった印象を与えるのかを紹介していました。

図3 アクションを促すボタンデザインのヒント
図3 アクションを促すボタンデザインのヒント

4. 10 Open Source Modal Login/Signup Windows For Developers - 1stWebDesignerhttps://1stwebdesigner.com/open-source-modal-login-signup/

ログイン/サインアップのモーダルウィンドウのコーディング例を多数紹介しています。

ログインと新規アカウント作成をタブで切り替える例や、まずSNS認証を出してログイン画面にも移動できる例などが掲載されていました。

図4 ログイン/サインアップのモーダルウィンドウのコーディング例いろいろ
図4 ログイン/サインアップのモーダルウィンドウのコーディング例いろいろ

5. 8 Must-Have Site & Page Building Tools for 2018https://line25.com/web-development/must-have-site-page-building-tools

コーディング無しにウェブサイトを作るためのツールを8つ紹介しています。

オンラインツールだけでなく、デスクトップアプリやWordPressのプラグインもあります。ポートフォリオサイトを簡単に作れる「Portfoliobox」は日本語化されていました。

図5 ウェブサイトビルダーを8つ紹介
図5 ウェブサイトビルダーを8つ紹介

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

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

ContentCoryhttps://www.contentcory.com/

ContentCoryは、ソーシャルメディアに投稿する記事やアイデアをカレンダーベースで管理するツールです。自動投稿機能がない分、アカウント連携などは不要で気軽に使い始められ、複数メンバーでの管理にも対応しています。

日時を指定して、どのSNSに投稿するか/記事内容/ハッシュタグを入力して保存します。画像添付やメモの追加も可能です。日時を設定せずにアイデアとして投稿しておくこともできます。自動投稿はしてくれませんが、メール通知機能があり、5分/15分/30分前が選べます。

無料プランは1カレンダー5ユーザー、月9ドルの有料プランはカレンダー数もユーザー数も無制限です。一人で複数のSNSを使い分ける場合は無料プランで大丈夫ですが、個人アカウントとブランドアカウントなどを使い分ける場合は、複数カレンダーが必要なので有料プランとなりますね。

図6 ソーシャルメディアに投稿する記事をカレンダーベースで管理するツール
図6 ソーシャルメディアに投稿する記事をカレンダーベースで管理するツール

おすすめ記事

記事・ニュース一覧