週刊Webテク通信

2014年7月第3週号 1位は,CSS3の新しいプロパティのチュートリアル10選,気になるネタは,Google,モバイル拡張現実ゲーム「Ingress」のiOSアプリをリリース

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

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

1. 10 CSS3 Properties Tutorials | SmashingApps.comhttp://www.smashingapps.com/2014/07/17/10-css3-properties-tutorials.html

CSS3の新しいプロパティに関するチュートリアルを10個紹介しています。

  1. :checked擬似クラスを利用したテクニック
  2. 背景画像を複数設定する方法
  3. 先頭の文字を大きくするドロップキャップを:first-child:first-letterで設定し,text-shadowで装飾するテクニック
  4. Transitionでベジェ曲線を引く方法
  5. フォントを設定する方法
  6. キーフレームアニメーションの作り方
  7. clipプロパティで画像を切り抜く方法
  8. background-clipプロパティで背景を切り抜く方法
  9. :first-of-typeセレクタの使い方と:First-Childとの違い
  10. マルチカラムレイアウトの設定の仕方

図1 CSS3の新しいプロパティのチュートリアル10選

図1 CSS3の新しいプロパティのチュートリアル10選

2. HTMLメール制作のコツや便利なサービスいろいろ | Webクリエイターボックスhttp://www.webcreatorbox.com/webinfo/html-email/

HTMLメールを作るためのテクニックやサービスを紹介した記事です。

メルマガなど企業からユーザーに送られるメールでは,HTMLメールが当たり前になってきています。しかし,Web制作テクニック系の記事でも,HTMLメールに関するものはごくたまにしか見かけないので,この記事は貴重だと思います。

わたしは最近HTMLメールのメルマガを作る仕事もしているという事情もあって,個人的に大変役に立つ記事でした。

なお,HTMLメールは英語では「HTML email」という表記が一般的なようです。

図2 HTMLメールを作るためのテクニックやサービス

図2 HTMLメールを作るためのテクニックやサービス

3. 50 fantastic freebies for web designers, July 2014 | Webdesigner Depothttp://www.webdesignerdepot.com/2014/07/50-fantastic-freebies-for-web-designers-july-2014/

Webデザイナーのための,無料の素材やテクニックなどをまとめています。

フォントやスクリプト,実験的なテクニック,テンプレートやモックアップなどが掲載されていました。

図3 Webデザイナーのための無料の素材やテクニックいろいろ

図3 Webデザイナーのための無料の素材やテクニックいろいろ

4. 100+ Free Social Media Icon Sets For Designers | free social media icons | Graphic Design Inspirationhttp://www.graphicdesignsinspiration.com/100-free-social-media-icon-sets-for-designers/

ソーシャルメディア用のアイコンセットを大量に紹介した記事です。

最近のアイコンデザインのトレンドはシンプルでフラットなものですが,シンプルなものから昔風の質感のあるボタンまで,様々なデザインのアイコンが掲載されていました。

図4 ソーシャルメディア用アイコンを大量に紹介

図4 ソーシャルメディア用アイコンを大量に紹介

5. Find Guidelines - The fastest way to brand assets.http://findguidelin.es/

各種Webサービスのロゴなどを使用する際の,ブランドガイドラインへのリンク集です。

FacebookやTwitterなどWebサービスのロゴを使いたいという場合,だいたいどのサービスもロゴをダウンロードできるように用意してあり,規約などを掲載しています。

しかし,そういったページは探しにくいところにあることが多いので,こういったまとめサイトがあると便利ですね。

図5 各種Webサービスのブランドガイドラインへのリンク集

図5 各種Webサービスのブランドガイドラインへのリンク集

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

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

Logoshi - Sketch a Logohttps://www.logoshi.com/draw

ロゴを作るためのWebサービスです。ロゴ制作のジェネレーターはいろいろありますが,このLogoshiはWebページ上のドローツールで描いた絵をベースにロゴを作ってくれるところが新しいです。

ドローツールで描いたものがマークになり,入力した会社名などの文字とセットでロゴが作られます。描いた絵とはかなり違った感じのマークが生成されますが,それはそれで面白いです。

マークが気に入らない場合は「Change Mark」,フォントが気に入らない場合は「Change Font」ボタンを押すと,別なものに変更されます。

気に入ったロゴが完成したら,ロゴのセットをダウンロードすることができます。ロゴと文字とが横並び/縦並びの2パターンで,それぞれ黒/白/カラーの3種類の画像がセットになっています。あくまでもビットマップ画像だけなのですが,小さなサイズのものは無料で,大きなサイズは有料で入手できるようになっています。

図6 Logoshiでロゴを作ってみた例

図6 Logoshiでロゴを作ってみた例

今週の気になるWebネタ

Google,モバイル拡張現実ゲーム「Ingress」のiOSアプリをリリース - ITmedia Mobilehttp://www.itmedia.co.jp/mobile/articles/1407/15/news059.html

Googleの社内スタートアップ Niantic Labsが作った位置情報を使った陣取りゲーム「Ingress」のiOSアプリが登場しました。

このゲーム,「人類を青組と緑組にわけて,地球規模の陣取り合戦を繰り広げるゲーム」で,自分のチームの陣地を広げるには,自分で実際に「ポータル」と呼ばれる場所まで移動しなくてはいけません。

Android版が先行で2013年11月に正式スタートしたというこのゲーム,英語版しかないにも関わらず,日本でも結構なユーザーが陣取り合戦を繰り広げているようです。

えっ,そんなの日本で流行ってるの? と思ったアナタ,このIngress Intel Mapを見てください。この地図を見ると,都心部ではかなり陣地争いが活発なのが分かると思います。

家の中にいながら世界中を見られるようにしたGoogle Earthやストリートビューを作ったGoogleが,家の外に出かけて自分の足で探検するゲームを作ったというところもポイントのようです。ゲームとはいえ,Googleの今後の方向性のヒントとなるプロダクトなのかもしれませんね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入