週刊Webテク通信

2018年8月第5週号1位は、日本のウェブデザインの10の特徴、気になるネタは、イープラス「チケット購入アクセスの9割がbotだった」――アカマイの検知システムで判明

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

1. 10 Distinctive Features of Japanese-Style Web Design - Designmodohttps://designmodo.com/japanese-web-design/

日本のウェブデザインの特徴を実例とともに紹介しています。

  1. ハイテクな要素
  2. 珍しいソリューション
  3. 変わった配色
  4. 縦書き
  5. 自然
  6. 巧妙なヒーローエリア
  7. アニメに影響を受けたイラスト
  8. キャラクター
  9. 漢字
  10. 伝統的な音

Yahoo! JAPANに代表されるような情報を詰め込んだ日本的なウェブデザインが話題になったこともありますが、この記事ではカッコイイ日本のサイトが取り上げられていました。

図1 日本のウェブデザインの10の特徴
図1 日本のウェブデザインの10の特徴

2. 10 Creative About Me Pageshttp://www.webdesigndev.com/10-creative-about-me-pages/

クリエイティブな自己紹介(About me⁠⁠/会社案内(About us)ページを作るためのヒントをまとめた記事です。

  1. 1つのコーナーとして扱う
  2. 自分の写真を入れる
  3. 売り込みをする
  4. テキストだけでなく画像も配置する
  5. 知識や技能を美しく表示する
  6. チームのメンバーを登場させる
  7. 良いフォント、色、見出し、背景を使う
  8. お客様の声を表示する
  9. メインとなる言葉を目立たせる
  10. 創造的になる
図2 クリエイティブな自己紹介/会社案内ページを作るためのヒント
図2 クリエイティブな自己紹介/会社案内ページを作るためのヒント

3. Design noteshttps://www.designnotes.co/

デザインの参考になるサイトや、素材やツールを入手できるサイトが、項目別にまとめられたリンク集です。

UIの参考/アイコン&イラスト/フォント/ビデオ素材/写真素材/カラー&グラデーションのツールやファイル/ワイヤーフレームツール/モックアップテンプレート/PSD&Sketch素材/UIキット/デザインガイドライン/デザインツール/プロトタイピングツール、などが掲載されています。

図3 デザインの参考や、素材やツールの入手ができるサイトのリンク集
図3 デザインの参考や、素材やツールの入手ができるサイトのリンク集

4. Icon Transition Generatorhttps://nucleoapp.com/tool/icon-transition

2つのアイコンが切り替わるアニメーションを、2つのSVGファイルから生成できるツールです。ホバー/クリックのどちらかの状態でアニメーションするよう設定できます。

2つの同じ大きさのSVGファイルをアップするだけで、自動でアニメーションが作られます。切り替え効果はスケール(1つ目の画像がちょっと小さくなって2つ目と入れ替わる)と回転を切り替えられます。

ダウンロードしたSVGファイルにJavaScriptが入った状態になっています。

図4 2つのSVGアイコンが切り替わるアニメーションの作成ツール
図4 2つのSVGアイコンが切り替わるアニメーションの作成ツール

5. Introducing Ghost 2.0https://blog.ghost.org/2-0/

個人的に注目しているブログプラットフォームのGhostが2.0にアップデートしました。以前は左右2分割画面でマークダウンをリアルタイムプレビューする編集画面でしたが、MediumやnoteのようなWYSIWYGの編集方法に変わりました。

Mediumインスパイア系のUIですが、さすがに後発だけあって、見た感じ使いやすそうです。

GhostはWordPressのUIチームに関わっていた人が立ち上げた次世代ブログプラットフォームで、KickStarterで3000万円以上の資金を集めたことでも話題となりました。今はホスティングサービスがメインのようですが、自分でサーバーにインストールして使うこともできます。

図5 ブログプラットフォームのGhostが2.0にアップデート
図5 ブログプラットフォームのGhostが2.0にアップデート

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

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

Logo Maker & Logo Creator - Free Logo Generator Onlinehttps://hatchful.shopify.com/onboarding/pick-space

ウィザード形式でロゴを作成できるサービスです。ネットショップのプラットフォームとして世界No.1のシェアの「Shopify」が提供しています。

業種を選ぶ、ビジュアルのスタイルを選ぶ、ロゴにしたい名称とスローガンを入力するといったステップで、ロゴの候補が表示されます。候補から選び、そこからフォント、色、アイコン、レイアウトをカスタマイズできます。

カスタマイズといっても、基本的には候補から選んでいくだけで、たとえばレイアウトを自分で調整するといったことはできません。その分、フォントを名称から選ぶような面倒なことをせずに直感的に選んでいけるところが、誰でも使えるツールとしてよくできているところだと思います。

図6 ウィザード形式でロゴを作成できるサービス
図6 ウィザード形式でロゴを作成できるサービス

おすすめ記事

記事・ニュース一覧