週刊Webテク通信

2013年10月第3週号 1位は,レスポンシブWebデザインの情報をまとめたポータル的なページ,気になるネタは,iPhone 5c純正ケースの丸い穴を使うゲームが登場

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

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

1. Responsive Design Knowledge Hubhttp://www.ugurus.com/responsive-design

レスポンシブWebデザインの情報をまとめた,ポータル的なページです。

レスポンシブWebデザインに関するネット上のいろいろな情報が,以下の項目に分類されて掲載されています。

  • 定義
  • サンプル,ギャラリー
  • 考え方
  • チュートリアルとツール
  • フレームワーク
  • ワークフロー

学習する,サンプルを探す,ツールやフレームワークを探すなど,レスポンシブWebデザインに関する情報が一箇所にまとめられた便利なページです。

図1 レスポンシブWebデザインの情報をまとめたポータル的なページ

図1 レスポンシブWebデザインの情報をまとめたポータル的なページ

2. UIPlayGround | CSS 3 Icons | CSS 3 Icons Generator | CSS 3 Icons Code Generatorhttp://www.uiplayground.in/css3-icons/

画像を使わずに,CSSだけで作られたアイコン集です。

CSSだけで難しい絵を再現しただけの実験的なものではなく,実際のサイト制作に使用できるものとして用意されているようです。

CSSのコードとHTMLのコードをコピーするだけで使えるようになっており,ブラウザの対応状況も記載されています。

図2 CSSだけで作られたアイコン集

図2 CSSだけで作られたアイコン集

3. Creative "Meet the Team" & "About Us" Pages | CSS Matterhttp://cssmatter.com/blog/creative-meet-the-team-about-us-pages/

「Meet the Team」⁠About Us」といった,いわゆるアバウトページの実例集です。

並んだ顔写真の全部の顔がカーソルを追うなど面白い作りのものが目立ちますが,一昔前に流行った手法という印象もしてしまいますね。

図3 アバウトページの実例集

図3 アバウトページの実例集

4. Review of Top Free CSS Editors - eWebDesignhttp://ewebdesign.com/free-css-editors/

各種CSSエディターを紹介した記事です。基本的にはデスクトップアプリを取り上げています。タイトルには「フリー」とありますが,Espressoなど有料のものも混じっているようです。

一番手に紹介されていて,たぶん最もポピュラーだと書かれている「Stylizer」ですが,わたしは知りませんでした。各種ブラウザ用のプラグインが用意されていて,保存前のCSSの適用状態をすぐにプレビューできるそうです。

図4 各種CSSエディターを紹介

図4 各種CSSエディターを紹介

5. 25 Popular HTML/CSS Code Snippets from CodePen - Flashuserhttp://www.flashuser.net/25-html-css-code-snippets-codepen

ナビゲーションやインターフェイスなどを実装するHTML&CSSテクニックを,CodePenより紹介しています。

CodePenはコードを共有するサイトで,ブラウザ上でコードを変更して確認することもできます。

図5 CodePenで共有された便利なコードを紹介

図5 CodePenで共有された便利なコードを紹介

そのほか,最近の記事の中から,jQuery関連の記事を紹介します。

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

先週の気になるWebサービス OneTimeBoxhttp://www.onetimebox.org/

OneTimeBoxは,非常にシンプルなファイル共有サービスです。ユーザー登録不要で,1GBまでのファイルを保存するボックスを作れます。

ボックスには固有のURLが割り振られるので,そのURLを教えた人がアクセスできます。パスワード保護などの機能はありませんし,アクセスした誰もが同じ権限なのでアップロードした人以外でもファイル削除ができてしまいます。

保存期間は1週間なので長期的な保存には使えません。1つのボックスに入れられるファイル数には制限はないようです。

ブラウザ上での画像プレビューなどの機能はなく,いたってシンプルな作りですが,メール添付するには大きなファイルの受け渡し用途に良さそうです。

図6 シンプルなファイル共有サービス

図6 シンプルなファイル共有サービス

今週の気になるWebネタ

iPhone 5c純正ケースを自慢する時がやってきた! ケースの丸い穴を使うゲーム,Flipcase登場 | TechCrunch Japanhttp://jp.techcrunch.com/2013/10/14/20131013flipcase-adds-some-fun-and-games-to-apples-iphone-5c-case/

穴のあいたiPhone 5c純正ケースを利用して遊ぶアプリが登場しました。以前はiPadのカバーを利用したアプリもありましたし,いろんなこと考える人がいるもんですね。

ケースの穴を画面側に付けると穴全部が活かされるわけじゃありませんし,画面も狭くなってしまうのですが,まあ早く出したもん勝ちのアプリと言えるでしょう。

この穴からうまく覗くように写真やグラフィックスを配置するCase Collageというアプリもありました。これは,作ったデザインをプリントアウトして,カバーとiPhoneの間に挟むんですね。

iPhone 5c純正ケース用「着せ替えシート」として,キャラクターもののシートを出すと売れるかもしれませんね。マンガやアニメのキャラクターたちが穴から顔を出しているのってカワイイんじゃないでしょうか。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入