週刊Webテク通信

2010年9月第1週号 1位は,お菓子のようなCSS3によるボタン,気になるネタは,Apple,「iTunes 10」発表 - 目玉はソーシャルネットワーク「Ping」

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

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

1. BonBon Buttons - Sweet CSS3 buttonshttp://lab.simurai.com/css/buttons/

お菓子のような,かわいいボタンをCSS3で実現したフレームワークです。魅力的な見た目で,自由度が高く,最小限のマークアップで実現できるものを目指して作られました。

使っている画像は1点だけで,あとはすべてCSSでデザインされています。ざらざらした質感を出すための,ノイズのテクスチャーの透過PNGファイルが唯一の画像です。色やハイライト部分,ドロップシャドウやアニメーションはすべてCSSで実現しています。アイコン類は記号フォントをWebフォントとして使っているようです。

HTML5やCSS3の新機能を随所に利用しているため,IEおよび古いバージョンのブラウザでは,狙い通りの表示にはなりません。もちろんどんなブラウザでもリンクテキストとしては動作するので,大きな問題はないでしょう。

図1 キャンディのようなかわいいCSS3ボタン

図1 キャンディのようなかわいいCSS3ボタン

2. Illustrator Template Toolbox for Web, Mobile and App Developers :Speckyboy Design Magazinehttp://speckyboy.com/2010/09/01/illustrator-template-toolbox-for-web-mobile-and-app-developers/

Webサイトやモバイルサイト,アプリケーションを開発するときに役立つ,Illustrator素材を多数紹介しています。

ワイヤーフレームに使えるテンプレートやUI素材,ボタンデザインのベースになる素材,各種モバイル端末のインターフェイスなど,いろいろありますね。

iPhoneやiPadなどを操作するときのジェスチャーを説明するための手のイラスト集が目にとまりました。これは便利そうです。

図2 Web制作に役立つIllustrator素材いろいろ

図2 Web制作に役立つIllustrator素材いろいろ

3. 見出しデザイン.comhttp://midashi-design.com/

いろいろなサイトの見出しを集めたギャラリーです。囲み線,斜線,点線などのカテゴリに分類されています。

見出しのデザインに注目した場合,全部画像なのかテキストと画像の組み合わせなのかも気になるので,そのへんも分かるといいなと思いました。

SafariやChromeで見ると,一覧画像が揺れて表示されますね。

図3 見出しデザインのギャラリーサイト

図3 見出しデザインのギャラリーサイト

4. クライアントに頼まれやすい機能を補えるWordPressプラグインいろいろ - かちびと.nethttp://kachibito.net/wordpress/plugins-for-commercial.html

WordPressでシステムを構築した際に,クライアントに要求されることの多い内容を解決するプラグインを紹介しています。

管理画面を使いやすくするもの,投票システムやコンタクトフォームを簡単に実装するものなど,知っておくといつか役立ちそうなものばかりです。

図4 クライアントからの要望に応えるWordPressプラグインいろいろ

図4 クライアントからの要望に応えるWordPressプラグインいろいろ

5. Flickr Groups for Logo and Web Design Inspirationhttp://www.1stwebdesigner.com/inspiration/flickr-groups-logo-web-design-inspiration/

ロゴを集めたもの,Webデザインを集めたものなど,デザインのインスピレーションになりそうなFlickrのグループを各種紹介しています。

Flickrユーザーなら,気になる画像をお気に入りに入れておくこともできますね。Flickrをこういう用途に使ってもいいのかしらという気もするのですが,どうなんでしょう。

図5 ロゴやWebデザインの参考になるFlickrグループ

図5 ロゴやWebデザインの参考になるFlickrグループ

そのほか先週の記事から,気になるニュース記事を小ネタもまじえて紹介します。

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

Greplinhttps://www.greplin.com/

「Greplin」は,Gmailやソーシャルサービスなど,クラウドでの自分のデータをまとめて検索できるようにするサービスです。Googleデスクトップ検索やMacのSpotlightのクラウド版といったところでしょうか。

Gmail,Facebook,Twitter,Dropbox,Googleカレンダー,Goolgeドキュメント,Evernote(プロ版で対応)などに対応しています。

有料のプロ版では,使えるサービスが増えるほか,インデックスされる容量が増える/セキュリティが強化される/PDF,ワードファイル,エクセルファイルの中身を検索できるなど,魅力的な機能が追加されるようです。

日本語の検索は期待できないと思いますが,まずは使ってためしてみたいですね。

さあ試してみるぞと思いユーザー登録をして,Twitter,Gmailなどを登録したのですが(OAuthなどのAPI経由での認証)⁠よく見ると「準備ができたらメールするね」といった内容のメッセージが…。まだベータ版なので,使えるユーザーが限定されているようです。

図6 クラウドのデータを一括検索できるサービス

図6 クラウドのデータを一括検索できるサービス

今週の気になるWebネタ

Apple,『iTunes 10』発表 - 目玉はソーシャルネットワーク「Ping」 | パソコン | マイコミジャーナルhttp://journal.mycom.co.jp/news/2010/09/02/002/

Appleのプレスイベントがあり,新しいiPodやソーシャルネットワーク「Ping」などの発表がありました。

PingはiTunesをバージョン10にしないと使えないということで,さっそくインストールしてみました。10では,アイコンが全く新しくなったんですね。これまでは,CDの上に音符が乗ったものだったのですが,やはりCDは時代遅れということなんでしょうか。

しかし,このアイコンは不評のようで,iTunes 10のアイコンが大不評―それなら代案を送ってみれば? ⁠投稿画像掲載中)なんて記事も出ています。

ほかの「i」アプリのアイコンに比べても異質な感じですが,ほかのアプリケーションも次バージョンでこの系統のアイコンになるのかもしれません。

また,MacのiTunes 10ではウィンドウ左上の3色ボタンが,縦並びになっています。インターフェイスの統一性が損なわれてしまいAppleらしくないですが,これも今後は他のアプリやOS自体もこうなっていくということなんでしょうかね。

iTunes 10で赤,黄,緑の3つのボタンを横並びにする方法 - MacBookの小部屋に,横並びに変える方法が紹介されていました。

Pingの話に行き着きませんでしたが,設定しただけでまだちゃんと使っていません。日本のアーティストのメンバーがいないしなぁ…。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入