週刊Webテク通信

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

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

ネットで見かけた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形式のロゴを探してダウンロードできるサービス

今週の気になるWebネタ

iPhone 7イヤフォン廃止で「Square」はどうなる? - 週刊アスキーhttp://weekly.ascii.jp/elem/000/000/385/385666/

iPhone 7でイヤフォンジャックが廃止され,イヤフォンジャックに接続するSquareリーダーはどうなるのという記事がありました。アダプターを使えばこれまでのSquareリーダーは使えるし,Bluetoothタイプのリーダーも提供される予定とのことです。

従来のイヤフォンやヘッドフォンもアダプタを使えば利用できます。しかし,スマホピアスなどと呼ばれるアクセサリ類は,アダプタに付けるというわけにもいかないでしょう。現状はイヤフォンジャック付きの端末が主流ですが,いずれイヤフォンジャックなしの端末が増えるとスマホピアスは廃れていきそうです。

スマホケースにストラップという組み合わせは今でも使っている人が多いので,結局はガラケー時代からのストラップの方が生き残るのかもしれません。新たな発想のスマホアクセサリーが登場することにも期待したいですね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入