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

デザインの記事一覧

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

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

もっと見る

List

  • 2009/05/02

WordPressのためのテーマフレームワーク「Thematic」

MOONGIFTのデザインは見づらい、見づらいと言われつつも何となく変更する気力が起きずそのままになってしまっている(申し訳ない)。デザインしてみたいという方がいらっしゃれば、このメールアドレス宛に連絡&金額を送ってもらいたい。シンプルにカスタマイズが容易なWordPressのテーマ用フレームワーク と、まぁ宣伝はそこ...

List

  • 2009/05/01

クリエイターの方にお勧めのポートフォリオシステム「ProFolio」

クリエイターの方にはおなじみのポートフォリオ。自分の作品(Webサイト、イラスト、写真、音楽などなど)を並べて、自己表現する場として使われる。インターネットがあれば誰でも自由にポートフォリオを掲げることができるので、それこそ世界に向けて自分の作品をアピールできる。シックなデザインのポートフォリオ そのようなポートフォリ...

List

  • 2009/04/26

iPhoneアプリケーションの画面デザイン設計に便利「LiveView」

iPhone向けのWebサイトやネイティブアプリケーションをデザインする際に、イラストレータやPhotoshopを使って行うケースは多いと思う。その際にはiPhoneの画面の大きさに合わせてキャンバスを設定し、作り込んでいるだろう。Mac OSX側ではiPhoneで表示したい部分を指定する だが実際の画面に合わせた時と...

List

  • 2009/04/26

これでデザイナも安心?DreamWeaver向けRails拡張「RubyWeaver」

Ruby on Railsは開発者にとっては便利なフレームワークだ。だが、規模が大きくなるとデザイナーの方との協業が欠かせない。そうなるとデザイナーの立場になるとrhtmlやerbといったファイルはあまり都合が良くない。入力補完機能が使える その点、PHPとDreamweaverの親和性は高く、作業がしやすい。その壁を...

List

  • 2009/04/18

iPhone向けWebサイト構築の基盤に「UiUIKit」

特定デバイス向けのWebサイト構築というのはごくシンプルだ。iPhone向けのWebサイトを構築する場合は、iPhoneで正しく見られれば良い。PCのように多彩なブラウザが使われていたりするとその表示誤差を吸収する必要があるが、iPhoneであればSafariだけで良い(今の所は)。アイコンリスト そのため、iPhon...

List

  • 2009/04/15

iTunes風な容量ゲージを表示する「Gauge.js」

何らかのサービスを考える際に、それを誰が見ても分かるようにするというのはデザインを決める上で重要な考え方だ。そのためには文字での説明ではなくアイコンや、イラストによって分かりやすく情報を提供する必要がある。iTunesのゲージ風 とは言え、素人がそれを簡単に実践するのは難しい。その際役立つのが世界でビジネスを展開してい...

List

  • 2009/04/12

Pythonの勉強にアートしよう「DrawBot」

去年の暮れぐらいからPythonが好きになってきている。Google App EngineやDjangoによるところが大きいが、Pythonを知っておけば色々な場面で役に立つ。とは言え実開発においてPythonを用いよう、という場面はまだまだ数少ないようだ。Pythonを使ってアートを描く そのため、勉強できる機会が少...

List

  • 2009/04/08

Blueprint CSSのレイアウト設計をグラフィカルに行う「Boks」

Blueprint CSSはCSSフレームワークの先駆け的なソフトウェアだが、これを使うとグリッドなデザインを簡単に実現できるようになる。多様なブラウザにも対応し、かつきっちりとしたデザインが組めるとあって、便利に使われている。グラフィカルにグリッド設計ができる とは言え、最初は使いこなすのに苦労するかも知れない。これ...

List

  • 2009/03/30

Webデザイナーの方にお勧めのグリッド表示アプリケーション「Slammer」

コンピュータで何かをデザインする際には、ピクセル単位で決められていく。まっすぐに並んでいるはずのものが左右にぶれていたり、意図した幅と異なっているともの凄く違和感を感じてしまうことがある。格子を使ってデザインを補助 そのため、様々なグラフィックスアプリケーションではグリッド表示機能が実装されている。それをどのアプリケー...

List

  • 2009/03/15

圧縮だけじゃない。CSSを解析した上で圧縮する「CSS Compressor」

CSSは最近のWebシステムでは当たり前のように使われている。そして肥大化したCSSはネットワークの帯域を余計に食っているようなものだ。それを解決する手段として、CSSの余計な空白や改行を消して圧縮する技術がある。こんなにちっちゃくなっちゃった! だがCSS Compressorはもう一歩先の技術を使って、さらに圧縮を...

List

  • 2009/03/05

YUI Grids BuilderのCSSをシェイプアップした「Object Oriented CSS」

CSSのフレームワークは既に多数登場している。レイアウトを簡単に決められるものや、ブラウザ互換性が高いレイアウトを簡単に構築できるとあって利用されるケースも増えている。だが、CSSは一度作成された後のリファクタリングがしづらく、肥大化しやすい傾向にある。yahoo、gCalといったクラスがある 有名なCSSフレームワー...

List

  • 2009/03/04

クリックでCSSのクラス名と構造を表示する「SelectorGadget」

CSSはよくも悪くも柔軟で、構造的に管理するのが難しい。デザインが乱れた時に、よくよく確認してみると別な場所で定義されているクラスやID、またはタグ名に対する直接指定のプロパティが影響していたということはよくある。ブックマークレット形式という珍しいオープンソース・ソフトウェア そのようなデザイン上の問題を素早く解決して...

List

  • 2009/03/03

AdobeのKulerをカラーピッカーで「Mondrianum」

Webデザインを決める際に、テーマに沿った色合いを決めたり、主立った配色を決めるようなことはよくあるかと思う。一色のテーマでは心もとなく、その場その場で色を選択していては非効率で統一感もなくなっていく。その時に役立つのがAdobeの提供するKulerだ。カラーピッカーから使えるKulerフロントエンド Kulerではカ...

List

  • 2009/02/21

複雑なグリッドに対応した軽量CSSフレームワーク「Golden Grid」

※ 画像は公式サイトデモよりWebサイトを作っていて、複雑なページ構成をCSSだけで組もうとするとすぐに無理がくる。floatやclear、left/rightなどを組み合わせるのだが思い通りにいかない。やっとできたと思ってIEでみたらぶっ飛んでいた、なんてことはざらにある。それだけでもうやる気がなくなってしまうことだ...

List

  • 2009/02/09

Sass記法を用いたCSSフレームワーク「Compass」

CSSはプログラマ向けの言語ではないため、最初は理解しやすいが、複雑な記述が入り交じっていくとメンテナンスが困難になる。Webブラウザはよく出来ていて、何となく書いたものでも動作してしまうからさらにややこしい。コマンドラインオプション そうした問題に対処するメタ言語として注目を集めているのがSassだ。そしてSassを...

List

  • 2009/02/06

Webページの適正チェックに「RightWebPage」

システム開発者がフレームワークやプログラミング言語にこだわるように、Webデザイナーの方はWeb標準への適合性に敏感だ。そのための仕組みも用意されているが、Webサイト全体をテストしようと思うと非常に大変だ。デザイナ/開発者双方にお勧めのテスティングツール そこで手軽にできるようにしてくれるツールを使ってみよう。Win...

List

  • 2009/02/02

複数の画像を一つにまとめてCSSで表示「SmartSprites」

Webサイトでは一度の表示であっても、複数のコネクションで様々なデータが送信される。JavaScript、CSS、画像、Flashなどなど。コネクションが増えればそれだけ表示に時間がかかり、ユーザビリティは悪くなる。コマンドラインで実行して連結する GoogleやAmazonでは回避策として複数の画像を一つにまとめ、C...

List

  • 2009/01/31

複雑なWebサイトデザインを容易に実現するテンプレート「YAML」

なぜデザインとYAMLが関係するのだろうと思ったが、ここでは「Yet Another Multicolumn Layout」の略らしい。つまりマルチカラムのデザインを容易に実現するためのCSSテンプレートということだ。整ったデザインが簡単に手に入るのはすばらしい! Webプログラマの一番の悩みどころがデザインだ。特にC...

List

  • 2009/01/25

どのブラウザでどのCSSハックが使えるか「CSS Selector Shell」

純粋なCSSだけで各ブラウザ間の表示互換性が保てればベストだが、実際の現場ではそのようなことがないのはよく知られている。そのため、各ブラウザ向けにCSSハックが登場しており、表示の互換性を保つために使われている。どのハックが有効かチェック だがFirefoxの各バージョン、Google Chromeなど様々なブラウザに...

List

  • 2009/01/14

Webベースのリソース管理ソフトウェア「ResourceSpace」

stanaka様よりご紹介いただいたソフトウェア(thanks!)。Webサービス構築の際や、サイト内で使う素材などはどのように探すだろうか。オンラインにあるものを使っても良いし、CD-ROMなどで販売されているものを使うケースもある。いずれにせよ、それらの素材は繰り返し使う可能性もあるので適切に管理しておくのが効率的...