週刊Webテク通信

2018年5月第5週号 1位は,CSSでの各種レイアウト手法を初歩から分かりやすく解説,気になるネタは,CSSEdit,Espressoの開発元MacRabbitが終了を発表

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

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

1. Getting Started With CSS Layout — Smashing Magazinehttps://www.smashingmagazine.com/2018/05/guide-css-layout/

CSSレイアウトの入門記事です。flexbox,CSS Gridといった最新の手法を押さえつつ,CSSでレイアウトする各種方法を初歩から分かりやすく解説しています。

float, positionプロパティによる配置,flexレイアウト,gridレイアウト,とコーディング例を挙げながら簡単に説明し,より詳しく学びたい人のための関連情報へのリンクもあります。

図1 CSSでの各種レイアウト手法を初歩から分かりやすく解説

図1 CSSでの各種レイアウト手法を初歩から分かりやすく解説

2. Fontisto - the iconic font and css toolkithttps://www.fontisto.com/

アイコンフォントとそのアイコンフォントを活用するためのCSSツールキットをセットで提供しています。商用でも無料で利用できます。

アイコンはくせのないシンプルなもので,矢印などの記号類やオンラインツールのインターフェイスに使われるものなど,一般的なものはだいたい揃っているようです。企業やサービスのロゴなどブランドアイコンが充実しています。

FontAwesomeのようなものですが,FontAwesomeが実質有料になった今,無料で使えるところに魅力を感じる人も多いでしょう。

図2 無料のアイコンフォント&CSSツールキット

図2 無料のアイコンフォント&CSSツールキット

3. Why You Shouldn't Use Bright, Saturated Colors for Backgroundshttp://uxmovement.com/content/why-you-shouldnt-use-bright-saturated-colors-for-backgrounds/

明るいはっきりした色を背景に使ってはいけない理由を解説した記事です。背景色には暗く,彩度が低い色を使った方が良い理由は,やはり見やすさということでした。

色見本を使って最適な背景色を見つける方法も解説しており,背景色の良い例&悪い例も掲載しています。

図3 明るいはっきりした色を背景に使ってはいけない理由

図3 明るいはっきりした色を背景に使ってはいけない理由

4. Overflow — the world’s first user flow diagramming tool tailored for designers.https://blog.overflow.io/announcing-overflow-public-beta-33fafc45d357

ウェブページやモバイルアプリのユーザーの導線を図にしたフロー図(や流れ図などと呼ばれる図)を作るのに特化したツール「Overflow」の使い方を紹介しています。

Overflowは最近パブリックベータになったとのことで,もちろんダウンロード先へのリンクも掲載しています。Overflowのページにある動画を見ると,どういうツールか分かりやすいと思います。

図4 フロー図作成ツールOverflowの紹介

図4 フロー図作成ツールOverflowの紹介

5. How to build a better product with UX writing – UX Collectivehttps://uxdesign.cc/how-to-build-a-better-product-with-ux-writing-926d78209ce8

UXライティングで良いプロダクトを作る方法を実例を交えて紹介した記事です。UXデザイナーという肩書きは日本でも見かけるようになってきましたが,海外ではUXライターという肩書きも生まれているようです。

コピーライターとUXライターの違いや,UXライターのやることも紹介しています。ボタン内のテキストやエラーメッセージなどの「マイクロコピー」を書くのがUXライターの仕事ということですね。

図5 UXライティングで良いプロダクトを作る方法

図5 UXライティングで良いプロダクトを作る方法

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

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

6 Instagram Stories Design Tools for Marketershttps://blog.iconosquare.com/instagram-stories-design-tools/

Instagramのストーリーズ用の画像や動画をデザインするための,ウェブサービスやモバイルアプリを紹介した記事です。テンプレートを元にデザイナーでなくても作れるツールをまとめています。

オンラインデザインツールのEasilは,Instagramストーリーズのためのテンプレートが豊富です。同様のツールとしてCanvaもありますが,Canvaにはストーリーズ用のテンプレートが今のところありません。

Adobe Sparkはアプリだけでなくウェブサービス版もあります。円状のインターフェイス上で丸をグルグル回すとデザインを提案してくれる機能が面白いですね。Creative Cloudのすべてのプランでプレミアム版が使えるので,Adobe CCユーザーには特におすすめです。

図6 Instagramのストーリーズ用の画像や動画をデザインするためのツールいろいろ

図6 Instagramのストーリーズ用の画像や動画をデザインするためのツールいろいろ

今週の気になるWebネタ

CSSEdit,Espressoの開発元MacRabbitが終了を発表

CSSEdit,Slicy,EspressoといったMac版ウェブデザイナー用ツールを提供していたMacRabbitが終了すると同社サイトで発表しました。Espresso,CSSEditはWarewolfという会社が引き継ぎ,Espressoの開発は続けられるようです。

CSSEditが大好きで,いまだにたまに使っているわたしとしては,とても残念です。Macのソフトらしい,使っていて気持ちの良いツールを提供するところでした。PhotoshopのPSDファイルからウェブ用に画像をスライスして書き出すSlicyも,一時期ファンが多かったと記憶しています。

Espressoは,メインのコーディングツールとしてではないですが,現在使用しています。開発会社が変わるということで不安ではありますが,次のバージョンのリリースを期待して待ちたいです。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入