タグ「デザイン」の公開予定記事
プレミアムユーザーは以下の記事を先行で購読可能です。MOONGIFTプレミアムは月額500円の有料サービスです。詳細はこちらから。
- 一般公開:2012/05/28
- 任意のサイトでWeb Fontsを試す
- 一般公開:2012/05/27
- ノブ型UIで直感的な入力を
タグ「デザイン」の記事一覧
MOONGIFTプレミアムは、月額500円の有料サービスです。詳細はこちらから。
2012/05/15
Adobe製。Webデザイナー向けのコードエディター「Brackets」
Webベースのエディターソフトウェアは幾つか登場していますが、Adobe社が開発したのがBracketsです。BracketsはHTML/JavaScript/CSSを使っていますが、ネイティブのアプリケーションとして提供されています。 メイン画面です。左側にファイルブラウザ、右側がコード編...
2012/05/04
(笑)や (爆)をアイコンで表現「Emolett」
インターネットが普及する前からパソコン通信などで使われてきた「(笑)」や「(泣)」といった文字。これをもっと今風に表現してくれるのがEmolettです。 フォントの一覧です。見事に顔アイコンが表示されています。 実際のHTMLです。class="emo"で書かれている文字を当てはまる顔アイコ...
2012/04/30
これが決定版?フォルダを監視してCSS/JavaScript/HTMLを生成「Fire.app」
最近はCSS/JavaScript/HTMLをそのまま書くのではなくSassやCoffeeScript、Haml/Markdownを使ってそれぞれのフォーマットに変換するのが当たり前になってきています。そこで使ってみたいのがFire.app、自動ファイル変換ソフトウェアです。 起動します。 ...
2012/04/28
吹き出し風CSSデザインをオープンソースで「CSS Arrow Please」
Twitterをはじめコミュニケーションが基本のサービスで欲しくなるのが吹き出し風のデザインです。そんなデザインをオンラインで簡単に作成できるのがCSS Arrow Pleaseです。 トップページです。左に描かれている吹き出しデザインが右側のCSSで作成されています。 吹き出しの位置は上下...
2012/04/21
お手軽!Bootstrapのカラーテーマを画像から作成する「Lavish」
Bootstrapは便利なデザインフレームワークですが、色のバランスが特徴的なのでかなり臭いが残ってしまいます。そこで色合いをがらっと変える際に使ってみたいのがLavishです。 トップページです。右側に画像が表示されていますが、その画像を色分析して特徴的な色をピックアップ、Bootstra...
2012/04/21
オンラインでCSS編集&ホスティング。本家終了に伴いオープンソース化「WebPutty」
オンラインでCSSを編集してリアルタイムプレビューしたり、ホスティングまで行うサービスWebPutty。今年いっぱいを持って終了が発表されており、そのシステムはオープンソース化されています。 ローカル版です。システム自体は本家と変わりません。 ログインします。 最初にチュートリアルが見られま...
2012/04/13
Bootstrapを使おう!様々なカラーテーマ、プラグインを用意「Kickstrap」
最近作られるWebサービスでよく使われているBootstrap。そんなBootstrapは固定色でそれっぽさが感じられてしまうのが欠点でしたが、見事に打ち消してくれるのがKickstrapです。 色が変わると随分印象が違います。 テーマ機能があります。 青と白。 こんな感じのシンプルなテーマ...
2012/04/11
iOSのデザインデバッグに使えるインスペクタ「DCIntrospect」
iOSアプリ開発の際のデザイン設計で役立ちそうなソフトウェアがDCIntrospectです。iOSのビューにおけるコンポーネントの配置をWebインスペクタのように表現してくれるソフトウェアです。 起動しました。キーボードのスペースキーを押します。 ステータスバーが変わったのが分かるでしょうか...
2012/04/10
Facebookアプリを真似たメニュー機能を実現「ECSlidingViewController」
iPadはiPhoneに比べれば画面が広いですが、それでも情報をたくさん詰め込む訳にはいきません。そこで使ってみたいのがFacebookアプリなどで使われているメニューを隠す手法です。同様の操作を実現するのがECSlidingViewControllerです。 最初の表示です。Menuボタン...
2012/04/06
これは格好いい。Windows 8のMetro UIをHTML5で再現「Metro UI CSS」
次期WindowsのWindows 8ではMetro UIと呼ばれる新しいインタフェースが利用されています。そんなMetro UIをCSSで再現したのがMetro UI CSSになります。 デスクトップで見たイメージです。アイコンが並んでいます。 選択できる画像リストです。 選択できるリスト...
2012/02/29
Bootstrapを使っていると思わせないテーマを作成「Bootswatch」
BootswatchはTwitterの開発したBootstrapをLESSにし、それらを容易にカスタマイズできるようにしたソフトウェアです。テーマのように色合いを変えて様々なWebサイトに適用できるようにします。 Bootswatchのトップページ。これもまたBootstrapで作られていま...
2012/02/25
jQuery Mobile向けBootstrapテーマ集「Twitter Bootstrap jQuery Mobile Theme」
TwitterのBootstrapは最新版でスマートフォンにも対応しています。そしてスマートフォン向けのJavaScriptライブラリと言えばjQuery Mobileです。この二つを組み合わせて使えるのがTwitter Bootstrap jQuery Mobile Themeになります。...
2012/02/24
WordPressのデザインをHTML/CSSのペアで試せる「Pears」
PearsはWordPressのテーマですが、デザインフレームワークとしての役割も兼ねています。そして実際にコードを試しつつ、デザインを作ることができます。 インストール後、テーマを有効にします。 一覧の画面です。 記事の画面です。HTML、CSSが入力できます。 例えばリストです。シンプル...
2012/02/22
HTML5/スマートフォン対応のWordPressテーマ「Reverie」
WordPressでHTML5で最適化したブログを作りたい、スマートフォンにも対応させたいと思っている方はReverieをベースに考えると良さそうです。HTML5で作られた、すっきりとしたテーマになっています。 WordPressの管理画面でインストールします。 インストールしました。 テー...
2012/02/20
IE8以前に救済。HTML5のタグを利用可能に「html5shiv」
HTML5のWebサイトを作りたいと思いつつ、IE向けのデザイン適用について心配する声は多数あります。そこで使ってみたいのがhtml5shivです。HTML5非対応のIEでもHTML5の要素を使ったデザインをサポートします。 例えばこんなデザイン。HTML5を使っていますがちゃんとスタイルシ...
2012/02/17
Webアプリケーションを作るのに便利そうなコンポーネント群「UIKit」
最近、TwitterのBootstrapが人気ですが、同じようにWebアプリケーションをデザインする際に使えそうなコンポーネント群がUIKitです。 まずダイアログ系のコンポーネントです。 閉じるボタン付き。 グレーアウトしたダイアログ。 HTML埋め込みもできます。 カラーピッカーコンポー...
2012/02/17
Webデザイナー向け。CSSを手軽に楽しむ「dabblet」,
dabbletはCSSのプレイグラウンドです。HTMLとCSSを記述してリアルタイムでその適用結果を確認できます。 トップページです。上半分が適用されたHTML、下がそのCSSとなっています。 上にマウスを持っていくとメニューが表示されます。 ログインします。GitHubアカウントでログイン...
2012/02/05
Tumblrのテーマをローカルでさくさく作り上げる「Fumblr」
Tumblrにはデザインをカスタマイズする機能がありますが、オンラインで行うには色々修正した後、確認して…という作業を繰り返す必要があります。そこでFumblrを使ってももっと効率的にTumblrのテーマを作成してみましょう。 インストールします。必要なライブラリはbundleでインストール...












アンケート