週刊Webテク通信

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

ネットで見かけた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 オンライン見積り作成サービスみつもらー

おすすめ記事

記事・ニュース一覧