週刊Webテク通信

2018年10月第1週号1位は、美容ブランドのECサイトが収益を倍増させた6つの変革、気になるネタは、Facebookのストーリー機能、デイリーユーザー数が3億人に到達--広告の世界展開も開始

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

1. These 6 changes doubled the revenue for a national beauty brand’s website.https://medium.com/@larryweru/these-6-changes-doubled-the-revenue-for-a-national-beauty-brands-website-11dbd6a383f4

美容ブランドのECサイトが行った6つの変革を解説しています。これらの対策により収益が倍増したそうです。

1 ナビゲーションにすべてのリンクが入っている
→ナビゲーションを3階層にして最初に表示されるカテゴリ数を減らした
2 ページの表示が遅い
→サーバーのパフォーマンスを上げる、画像を圧縮する、JavaScriptを見直す、CDNを使うといった対処法があるが、このケースではホスティングでのWooCommerceからShopifyに乗り換えた
3 チェックアウトのプロセスが煩雑
→長い説明をタブに整理して製品ページを簡素化しカートに入れやすくなった。Shopifyに変えたことで、ページ分割した最適化されたチェックアウトの流れを得られた
4 古いコンテンツ
→Instagramのコンテンツを埋め込む、ブログを更新することで常に新鮮なコンテンツを提供するようにした
5 ブランドストーリーが明快ではない
→ホワイトスペースと画像を使いメッセージを伝えるページを作った
6 プレス記事がリストされていない
→プレスページを作って報道機関のロゴを並べた。各紹介記事にリンクするのではなく記事のスクリーンショットを使った(ウェブページはなくなることがあるので)
図1 美容ブランドのECサイトが収益を倍増させた6つの変革
図1 美容ブランドのECサイトが収益を倍増させた6つの変革

2. Portfolio Design Trends in 2018 | Design Shackhttps://designshack.net/articles/trends/portfolio-design/

ポートフォリオサイトのデザイントレンドをまとめた記事です。

  • たっぷりの余白
  • 大きなタイポグラフィ
  • フルスクリーンのアニメーションするナビゲーション
  • ミニマリズムに刺激を受けたデザイン
  • カラーオーバーレイ
  • モジュール化されたグリッド
  • 合理化されたプロジェクトのショーケース
図2 2018年のポートフォリオサイトのデザイントレンド
図2 2018年のポートフォリオサイトのデザイントレンド

3. How to Create an Effective 404 Error Pagehttps://www.designyourway.net/blog/web-design/how-to-create-an-effective-404-error-page/

効果的な404エラーページを作る方法をまとめています。

  • 自分のスタイルに固執する
  • オプションを提供する
  • 何が間違っているのか説明する
  • あまりに情報が多いページにしない
  • 面白さをちょっとプラスする
  • 感情に訴える
  • インタラクティブ性を持たせる
  • 製品を利用する
図3 効果的な404エラーページを作る方法
図3 効果的な404エラーページを作る方法

4. UI Design In Different Countries – UX Planethttps://uxplanet.org/ui-design-in-different-countries-fccd75f27a4

インターナショナルに活躍するデザインエージェンシーが、世界各国向けのUX/UIデザインを行った経験を紹介した記事です。

日本、サウジアラビア&UAE、中国、ロシア、インド、そして多くの顧客がいるというアメリカ、イギリスおよびヨーロッパ各国でのデザインの特徴について簡単に解説しています。

図4 世界各国でのUX/UIデザインの特徴
図4 世界各国でのUX/UIデザインの特徴

5. Design DBhttps://www.designdb.co

デザイン素材をまとめて探せるデータベース的なサイトです。UIデザインのためのUIキット、ワイヤーフレーム素材などを中心に、いろいろな素材をダウンロードできます。

UI、アイコンなどカテゴリ別に探せますし、アプリ名や用途などのタグ別に絞り込めるのも便利です。

図5 デザイン素材を探してダウンロードできるサイト
図5 デザイン素材を探してダウンロードできるサイト

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

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

SchemeColor.com: Download, create & share beautiful color combinationshttps://www.schemecolor.com/

カラースキームを作成、シェア、ダウンロードできるサービスです。この手のサービスは山のようにありますが、使いやすさとこだわりが感じられて良くできていると思いました。

カラースキームはそれぞれ詳細ページがあり、紹介文、それぞれの色名とHex値、RGB値、CMYK値が記述されています。ダウンロードできるのは、ページに表示されているものと同じHex値が書かれたカラースキームの画像だけでした。

画像、建物の外装色から抽出したカラースキームは写真とともに表示された状態で一覧できます。国旗の色やブランド色からも探せます。右上の四角形が並んだメニューからいろいろな機能にアクセスでき、画像からカラーパレットを作ったり、ランダムにカラースキームを表示する機能もあります。

図6 カラースキームを作成、シェア、ダウンロードできるサービス
図6 カラースキームを作成、シェア、ダウンロードできるサービス

おすすめ記事

記事・ニュース一覧