週刊Webテク通信

2016年9月第5週号1位は、最近のトレンドの小さなロゴを隅に配置したWebデザイン、気になるネタは、iPhone 7イヤフォン廃止で「Square」どうなる

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

1. Design Trend: What’s Up With All Those Tiny Corner Logos? | Design Shackhttps://designshack.net/articles/graphics/design-trend-whats-up-with-all-those-tiny-corner-logos/

ロゴを小さく扱うのが最近のWebデザインのトレンドということで、隅に小さなロゴを配置したサイトの実例と傾向についてまとめた記事です。

ロゴを以下の種類に分けて、それぞれの特徴などを解説しています。

  • 四角形
  • アイコンロゴ
  • ロゴタイプ
  • アプリのアイコン形式
  • 単に縮小したもの
図1 小さなロゴを隅に配置したWebデザインについて
図1 小さなロゴを隅に配置したWebデザインについて

2. Understanding CSS Grid Layout - Envato Tuts+ Web Design Tutorialshttps://webdesign.tutsplus.com/series/understanding-css-grid-layout--cms-1079

CSS Grid Layout Moduleを使ってのグリッドレイアウトを解説したシリーズ記事で、現在「A Quick Start Guide」⁠Fluid Columns and Better Gutters」の2本の記事が公開されています。

Flexboxでも難しい複雑なグリッドレイアウトを実現できるGrid Layout Moduleですが、まだ対応しているブラウザは少ないです。しかし、Microsoft EdgeとIE11で対応していることから普及が期待できると思います。

Chromeでは、⁠chrome://flags」で試験運用機能のページを開き、⁠試験運用版のウェブ プラットフォームの機能」を有効にすることで利用できます。

図2 CSS Grid Layout Moduleを使ったグリッドレイアウトを解説
図2 CSS Grid Layout Moduleを使ったグリッドレイアウトを解説

3. Choosing The Right Prototyping Tool – Smashing Magazinehttps://www.smashingmagazine.com/2016/09/choosing-the-right-prototyping-tool/

正しいプロトタイピングツールの選び方を解説しています。

選び方として、以下の5つの観点から考えることを提案しています。

  1. 成長曲線
  2. グループワークのサポート
  3. 最終形への忠実度のレベル
  4. ワークフローへの統合
  5. 使いやすさと快適さ

3は、どれだけ最終完成形に近い見た目や機能で作りたいかということで、手描きのアバウトな段階で作るというニーズもあるので、忠実度のレベルが高い方が良いという訳ではありません。

図3 正しいプロトタイピングツールの選び方
図3 正しいプロトタイピングツールの選び方

4. Granim.jshttps://sarcadass.github.io/granim.js/index.html

アニメーションするグラデーションを作れる軽量なライブラリです。このページ自体がサンプルになっていますが、なめらかに変化するグラデーションを実装できます。

グラデーションは線形、円形が選べますし、透明度を設定して画像に重ねたり、画像でマスクすることも可能です。

図4 アニメーションするグラデーションを作れる軽量なライブラリ
図4 アニメーションするグラデーションを作れる軽量なライブラリ

5. 20+ Stunning Hero Images for a Creative Website | Design Shackhttps://designshack.net/articles/inspiration/stunning-hero-images-for-a-creative-website/

サイトのメイン画像やヘッダ画像を作るための素材集を大量にまとめた記事です。

個人サイトのトップページで、机の上ににパソコンやデジタルガジェット、ノートなどが並んでいる画像を見かけることがよくありますが、そういったイメージを合成して作るための素材などを紹介しています。

図5 サイトのメイン画像やヘッダ画像を作るための素材集いろいろ
図5 サイトのメイン画像やヘッダ画像を作るための素材集いろいろ

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

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

SVG PORN — 800+ high quality svg logoshttp://svgporn.com/

企業やブランドのSVG形式のロゴを探してダウンロードできるサービスです。各ロゴの利用にあたってのレギュレーションなどがないところが気になりますが、現在875個のロゴが登録されています。

キーボードまたはページ上のボタンで5段階にサイズを変更できたり、タグクラウドが画面全面に表示されたりと、サイトのUIも参考になります。

表示されるロゴは、その企業やサービスのサイトにリンクしています。カテゴリやハッシュタグで分類されているので、有名サービスへのリンク集としても使えそうです。なお、ロゴのSVGはロゴ上で右クリックかドラッグ&ドロップで保存できます。

図6 SVG形式のロゴを探してダウンロードできるサービス
図6 SVG形式のロゴを探してダウンロードできるサービス

おすすめ記事

記事・ニュース一覧