週刊Webテク通信

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

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

ネットで見かけた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 ソーシャルメディアに投稿する記事をカレンダーベースで管理するツール

今週の気になるWebネタ

Twitter,複数アカウントによる同じツイートやいいねを規制へ ロシアbot問題を受け - ITmedia NEWShttp://www.itmedia.co.jp/news/articles/1802/22/news065.html

Twitterで同じ内容のツイートを複数アカウントでツイートすることが規制されるそうです。これは,ツールを使って自動で同じ内容を複数アカウントで投稿できなくするということで,複数ユーザーが同時に「バルス!」など同じツイートをしても規制はされないはずです。

Twitter公式アプリTweetDeckで複数アカウントでのツイート,RT,いいね,フォローができなくなり,サードパーティーのツールでもそれに準拠する必要があるということですね。

スパムアカウントが運用しにくくなりそうで,これは良い機能変更だと思います。ツールを使って複数のSNSに同じ内容を投稿したいことはあっても,複数のTwitterアカウントに同時投稿するのはモラル的にもダメだと感じます。昔風に言えば「マルチポスト禁止」ですね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入