週刊Webテク通信

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

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

ネットで見かけた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 ウィザード形式でロゴを作成できるサービス

今週の気になるWebネタ

イープラス「チケット購入アクセスの9割がbotだった」――アカマイの検知システムで判明 - ITmedia NEWShttp://www.itmedia.co.jp/news/articles/1808/23/news126.html

チケット販売サイトにbot検知システムを導入したことで,チケット買い占め問題を改善できたそうです。ある先行販売チケットの発売日30分間では,チケット購入のアクセスの9割超がbotだったとのこと。

キー入力やマウスの動きなどの「ふるまい」を機械学習してbotと人を識別する仕組みで,かなりの精度のようです。今後bot側も対策をしてきて,いたちごっこになっていく気もしますが,この対策法に期待したいです。

チケット転売問題は,転売されている段階での対策を考えがちだと思うのですが,こういう対処法もあったんですね。bot検出の仕組みは,ネット投票での組織票対策などいろいろなところに応用できそうですね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入