週刊Webテク通信

2011年3月第1週号 1位は,ハイクオリティなフリーのデザイン素材いろいろ,気になるネタは,iPad 2はHDビデオ撮影ができるカメラ搭載

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

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

1. A hundred of REALLY high quality free design elements and where to find themhttp://www.webdesignshock.com/showcase/high-quality-web-design-freebies/

ハイクオリティなフリーのデザイン素材が大量に紹介されています。

ボタンやUI要素などのPSDファイルを中心に,Webデザインに役立ちそうな素材データがたくさんあります。

中でも「WordPress ThemeShock」というWordPressのテーマとWebデザイン素材を配布しているサイトから,多くの素材が紹介されています。アメリカでは受けそうだけど日本ではちょっと…というサイバーっぽいデザインのものが目立ちますが,落ち着いたものも少なくありません。

今流行っている,立体的なリボンや皮に糸で縫ったような素材が多いですね。自分でデザインを起こす場合の参考にもなるでしょう。

図1 フリーのデザイン素材を大量に紹介

図1 フリーのデザイン素材を大量に紹介

2. CSS3 Buttons | Simple CSS3 framework for creating GitHub style button linkshttp://css3buttons.michaelhenriksen.dk/

CSS3を使ったシンプルなボタンを作るフレームワークです。GitHubというサイトで使われているボタンを参考にしています。

aタグにclassを指定するだけで適用でき,形や色もclassの指定で変更できます。

ボタンの背景のグラデーションやアイコン部分は画像を使っています。グラデーションはCSS3で,アイコンはフォントを使う方法もありますが,あえて確実な方法を選んでいるのでしょう。

アイコンの数も豊富で,シンプルで使いやすそうなデザインなので重宝しそうです。

図2 CSS3ボタンのフレームワーク

図2 CSS3ボタンのフレームワーク

3. CamanJS - Image Manipulation in Javascripthttp://camanjs.com/

HTML5のcanvasとJavaScriptを使って,画像に簡単にフィルタをかけることができるソリューションです。

デモページでは,スライダーを動かして明るさやコントラストなどを変更するサンプルを見ることができます。

誰もが簡単にフィルタやプラグインを追加できる設計になっており,プラグインが充実していくことで発展していくことを考えているようです。

canvasで描画するためのJavaScriptライブラリjCanvaScriptというのもあります。

図3 canvasとJavaScriptによる画像処理

図3 canvasとJavaScriptによる画像処理

4. fladdict » HTMLで文字詰めするタイポグラフィー用JShttp://fladdict.net/blog/2011/02/auto-kerning.html

日本語テキストの文字詰めを行うためのJavaScriptの紹介です。

たとえば「す。」の組み合わせの場合は「-0.15」詰めるとか,行頭に括弧がある場合「-0.5」詰めるといったことをHTMLのテキストに対し適用できるようになります。

この,文字の組み合わせによってどれだけ詰めるかという設定は,あらかじめ用意する必要があります。現在サンプルで40ペアくらいの文字詰め情報を設定しているそうです。

このスクリプトの作者によると,誰かが文字詰め情報を作ってくれて,みんなで共有できたらいいと考えているようです。我こそはという人は,ぜひ参加していただければと思います。

図4 テキストの文字詰めを行うJavaScript

図4 テキストの文字詰めを行うJavaScript

5. Circle Shapes: 26 Dazzling Examples for Web Design Inspiration | Shapes Design Inspirationhttp://www.shapes4free.com/shapes-design-inspiration/circle-shapes-for-web-design-inspiration/

円形を使っているWebデザインのギャラリーです。

丸みが柔らかい感じを与えるということで,かわいいデザインのサイトが目につきます。

図5 円を使ったWebデザインいろいろ

図5 円を使ったWebデザインいろいろ

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

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

みつもらー オンライン簡単見積り作成https://mitumora.com/

クリエイター向けの,見積り書作成のためのWebサービスです。

Webデザインに関する項目があらかじめ用意されているので,該当する項目を選び金額を入れていくだけで,簡単に見積りが作れそうです。もちろん項目名はカスタマイズできます。

見積り書をもとに,請求書も作成できます。月々の売り上げをレポートする機能も付く予定です。見積もりや請求書のデザインも,クリエイターが使って恥ずかしくないようなものに仕上がっていると思います。

見積り~受注~請求~入金までを管理するように設計されているようで,フリーランスのWebデザイナーにはかなり興味深いサービスですね。

3月31日まで無料ですが,その後は有料になるようです。利用規約を見ると,月間利用料金制度と年間利用料金制度があると書かれていました。

図6 オンライン見積り作成サービスみつもらー

図6 オンライン見積り作成サービスみつもらー

今週の気になるWebネタ

「iPad 2」発表 より薄く,ホワイトモデルも 日本は3月25日発売 - ITmedia Newshttp://www.itmedia.co.jp/news/articles/1103/03/news019.html

アップルからiPad 2が発表されました。前面と背面にカメラが搭載/画面解像度は変わらず/サイズは薄く/ちょっと軽くなった,といった,ほぼウワサ通りの内容でしたね。お風呂のフタに似ていると言われる専用カバーは予想外でしたが。

わたしが注目するのは,iPad 2でHD動画を撮影し,iMovieで編集できるようになったことです。⁠パソコンは難しい,iPhone 4では画面が小さい」という年配の人をはじめ,デジタルオンチの人でもビデオ編集を楽しむことができるんじゃないでしょうか。⁠iPad 2を使って孫や子どものビデオを編集しよう」みたいな講座をカルチャースクールでやると流行るんじゃないかと思います。

iPadを構えて撮影するのは大変だとは思いますが,撮影も編集も同じマシンでできるところが,デジタル機器に慣れてない人にはいいですよね。三脚や望遠レンズなんかもサードパーティから登場するでしょう。

iPhoneで撮影したムービーをミュージックビデオに使ったアーティストもいるようですが,これからはiPad 2で撮影から編集まで行ったCM・映画・ドラマなんかも登場するんじゃないかと思います。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入