ITエンジニア/デザイナ向けにオープンソースを毎日紹介

デザインの記事一覧

プレミアムユーザー限定記事

MOONGIFTプレミアムは、月額500円の有料サービスです。詳細はこちらから

もっと見る

List

  • 2008/02/20

Photoshopのブラシをプレビュー「ABRviewer」

デザイナーの方でPhotoshopを利用している人は数多い。画像編集機能の多様さ、優秀さもさることながら、カスタマイズ可能なブラシ機能が便利に感じている方も多いのではないだろうか。しかしいざインストールしてみたら印象が違ったという場合もあるだろう。そうした時に便利なのがこのビューワーだ。今回紹介するオープンソース・ソフ...

List

  • 2008/02/03

必見!CSSを使って複数の画像を一つに「CSS Sprite Generator」

Googleの表示速度の速さの秘密に、コネクションを極力減らすということがある。それが複数の画像を一つにまとめてしまい、CSSのポジションをずらすことで表示するという手法だ。これを使うと画像のダウンロードは一回で済むのでコネクションが少なくて済む。実際、検索結果のGoogleロゴを見ると、複数の画像が混ざった結果なのに...

List

  • 2008/01/27

Amazon風のスライドを実現「jCarousel」

Amazonの商品詳細ページなどで使われている、関連商品のスライダー。格好が良く、ついつい色々見てしまい、あげくに購入してしまった、なんて経験がある人もいるのではないだろうか。通常、縦スクロールを使って動くのが当たり前のWebページにおいて、横の動きが与えるインパクトは大きい。そこで試してみたいライブラリがこれだ。今回...

List

  • 2008/01/23

CSS+画像でグラデーション「CSS Gradient Text Effect」

ソフトウェアと言えるかどうか不明だが、とても格好いいのでご紹介。最近のサイトの特徴として、グラデーションを使ったクールな印象があげられる。ヘッダーなどのインパクトを与える文字にグラデーションを使ったサイトも良く見かけるだろう。文字にグラデーションを適用するには画像を使うのが一番手軽だが、文字列を選択してコピーできないと...

List

  • 2008/01/17

必見!画像をベクター化「AutoTrace」

ロゴを刷新しようと思ったら、元のベクターイメージがなくなっていた、なんて経験はないだろうか。また、元のロゴは全くなく、写真から起こす必要があるなんて場合も考えられる。画像からベクター化する作業というのは非常に大変だ。そんな大変な作業の手助けになりそうなのが、このソフトウェアだ。今回紹介するオープンソース・ソフトウェアは...

List

  • 2008/01/15

オライリー風なサイトも作れそう?「Old book illustrations」

オライリー本の特徴と言えば、何といってもあの動物の描かれた表紙だろう。リアルでちょっと古風な感じの絵が逆に新鮮だ。様々な技術書がある中で、あの独特な絵もあって、オライリー本だけはすぐにそれと分かる。そんなオライリー風なデザインができそうな素材集がこちら。今回紹介するオープンソース・プロジェクトはOld book ill...

List

  • 2007/12/09

コンパクトなCSSフレームワーク「Boilerplate」

ここ最近、次々と目にするようになってきたCSSフレームワーク。TomcatやRailsをはじめとするサーバサイド、prototype.jsやjQueryといったクライアントサイド、そしてデザイン領域のCSSへとフレームワークの裾野は広がっている。こうしたフレームワークを覚えれば、サイトの構築は手軽になる。CSSによる三...

List

  • 2007/12/05

JavaScriptとCSSの融合「Dynamic CSS via JavaScript」

JavaScriptを使ってCSSを変更というのは良くあることだ。例えばクリックで表示を消す場合やフェードアウトさせるような類のイフェクトがある。$.style.display="inline";のような指定をするだろう。しかしこれではCSSとJavaScriptの距離が遠い。もっとダイナミックにCSSを操作しよう。今...

List

  • 2007/11/21

フォントを比較しよう「FontDoc」

Mac OSXには奇麗なフォントがたくさんある。文字の奇麗さがMac OSXの特徴の一つだとも言える。そんなフォントを使う際に、何を使って閲覧しているだろうか。デフォルトでFont Bookというアプリケーションが入っているが、これは一覧になっておらず、多少分かりづらい。そこでこれだ。今回紹介するフリーウェアはFont...

List

  • 2007/11/19

クールなボタンを作る「ButtonBuilder」

アクア風なデザインの流行も収まったかと思うが、それでも様々なサイトで利用されている。透明感、丸みのあるデザインがクールなサイト、ポップなサイトどちらにも使えるのが便利だ。そんなアクア風ボタンを作るTipsは各種あるが、一つのソフトウェアだけで簡単に終わらせてしまうのがこれだ。今回紹介するオープンソース・ソフトウェアはB...

List

  • 2007/10/31

よく使うスタイルをユーティリティ化「logicss」

CSSを使うのが当たり前になり、Webエンジニアと言えどもある程度のデザインはこなす必要がある時代になっている。だがいざやってみると色々と大変なのがCSSでもある。よく使われるスタイル指定や、テクニックをまとめてしまったのがこちらのソフトウェアだ。今回紹介するオープンソース・ソフトウェアはlogicss、どこでも使える...

List

  • 2007/10/28

ブラウザ上の色情報を取得「ColorZilla」

サイトを見ていて「おっこの色良いな」と思った経験はないだろうか。HTMLで書かれていれば、RGBベースに知る事はできる。だが、16進数から通常の画像編集ソフトウェアの10進数に直すのは面倒だ。また、それが画像だったりすると、一度保存してスポイトツールで調べる必要がある。いずれも面倒だ。そんな手間を踏むくらいならこれを使...

List

  • 2007/10/21

プレビュー付HTMLエディタ「Selida」

最近はDreamweaverやKompoZerをはじめとしたWYSIWYGなHTMLエディタを使わなくなっている。手打ちでdivタグを書いて、CSSで調整する方が楽になってしまった。そうなると手打ちのHTMLタグエディタが便利になるかも知れない。そこで紹介したいのがこのソフトウェアだ。今回紹介するフリーウェアはSeli...

List

  • 2007/10/17

Flashをハックして動作変更「flasm」

最近、Flashをいじる事が多いのだが、プログラマ上がりには色々とつらい。特にFlaファイルが配布されているなら良いが、CやMingを使って動的に生成されたものだとそれすらなく、どうやって作ったのかも分からないものがある(Cとしてはオープンソースだが、SWFはコンパイルされて中身が分からない)。そうした時にAction...

List

  • 2007/10/15

サイトのパフォーマンス向上を目指そう「YSlow」

AjaxやCSSや様々なJavaScriptライブラリによって、サイトが豪華になっていく反面、全体的なシステムパフォーマンスは急激に悪化している。JavaScript等で、このサイトは重いなと感じる事が少なからずあるはずだ。便利な機能を提供する限り、これは変えられないのだろうか。いや、そんな事はない。変えるべきポイント...

List

  • 2007/10/12

CSS Validを目指せ!「CSS Validator」

CSSを使ったサイトが当たり前になりつつあるが、ブラウザ間の整合性を保つのは非常に難しい。ましてやValidなCSSをくみ上げるというのは並大抵ではなく難しい。チェックする機能が必要だ。オンライン上でCSSのチェックをしてくれるサービスとしてはW3C CSS 検証サービスがあるが、これはサービスが既にローンチしている必...

List

  • 2007/10/11

CreativeCommonsの各種素材集「OpenWebGraphics」

サイトを作る上で大事なのがデザインだ。だが、これが技術者にとっては最も厄介な存在だろう。システムはある程度組み上がっても、デザインがうまくいかずにそのまま放置…なんて経験は誰しもが持っているのではないだろうか。サイトデザインについては、既に様々なオープンソース系サイトが立ち上がっている。さらにアイコン等が欲しい人はここ...

List

  • 2007/10/07

WYSIWYGなHTMLオーサリング「KompoZer」

個人的にAdobe GoLive(今は既にないだろうか)とDreamweaverは前者が高く、後者が安いイメージがあった。が、全く違っていたようだ。Adobe Dreamweaverは4万円以上する高価なソフトウェアに変わっていた(元々?)。こうなると個人ではおいそれと手を出しづらくなる。最近はDivタグ+CSSでデザ...

List

  • 2007/10/02

ActionScript GUIフレームワーク「AsWing」

Flashと言うと、興味はあっても手は出していない技術者が数多い。なぜかと言えば、デザインとプログラムが融合していて何となく難しそうな感じがする事と、有償というイメージがある事に所以するだろう。ActionScript2/3の開発についてはFlashDevelopを使えば良い。しかしこれでは画面デザインをプログラムベー...

List

  • 2007/09/27

出た、構造化CSS「CleverCSS」

前にCSSの記述テクニック 階層宣言コーディングというエントリーを読んだ。これはエイプリルフールネタではあるが、同じ事を考える人は他にもいるようだ。そして、それをネタとしてではなく、ないなら実現してしまおうと考える。今回紹介するオープンソース・ソフトウェアはCleverCSS、構造化CSSを実現するソフトウェアだ。Cl...