Downloads Get the desktop, mobile, and font installer apps
Downloads Get the desktop, mobile, and font installer apps
WEB企画では、デザインレビューの際に「InVision」というWebサービスを使っています。半年ほど前から試験的に使い始めた「inVision」ですが、使ってみるとかなり使い勝手がよくデザインチェックが短い時間で的確にできるようになりました。 今では手放せないツールの一つとなった「inVision」。今回はこのinVisionの便利な点と具体的な使い方についてご紹介したいと思います。 inVisionとは まずは簡単にinVisionについてにご説明。InVisionはアプリやホームページのプロトタイピングを複数人で効率的に作成することができるWebサービスです。 EvernoteやAirbnbといった有名企業もアプリ開発の際にこのinVisionを採用しているんだそうです。なんだかすごそうですね。 inVisionにデザインやワイヤーフレームをアップすることで、デザインに対してのコメン
ITかあさんです。もう私のことは忘れてしまいましたか、無理もありません。ここまでブログ放置したのは開設以来初めてで、独立してからめっちゃくちゃ忙しい数ヶ月をようやく乗り越え、やっとブログに向き合う時間が出来ました。放置した数ヶ月分の知識を吐き出していきたいと思います。 TwitterBootstrapは便利だよね 元WEBデザイナのくせに今や一切デザインしたくないITかあさんとしては、下手にデザイン考えるくらいならTwitterBootstrapを始めとしたおしゃれなCSSフレームワークを使ってデザイン及びコーディング時間を削減して、プログラミングに時間を費やしたいです。 ドラッグ&ドロップでTwitterBootstrapのサイトが作れる! TwitterBootstrapは便利だしおしゃれなんですが、それ相応のTwitterBootstrapの知識も必要ですが、Jetstrapは多少の
先日、Twitter Bootstrapが2.1.1にアップデートされました。 Bootstrapが2.1になって大幅に機能も追加され、ウェブサイトを構築する上で必要なUIがほとんど揃っている感じがします。 最近では、スタートアップ系のWebサービスを作る人にとっては、Bootstrapが必要不可欠な存在になりつつあります。 とはいっても、Bootstrapに慣れていない人が、実際にページを作っていくにはコンポーネントのタグ構造やClass名を意識して作らないといけないので、少し難しい部分もあります。 Bootstrapのサイトを見ればマークアップのサンプルがあるので、それを見ながら作れば良いのですが1つ1つ確認しながら行うのも手間です。 そこで今回ご紹介するのが、BootstrapのUIをドラッグアンドドロップだけで簡単に組めるエディタ「Jetstrap」です。 jetstrap - B
Lavishは任意の画像を解析してカラーパターンを抽出し、それをBootstrapに適用するソフトウェアです。 Bootstrapは便利なデザインフレームワークですが、色のバランスが特徴的なのでかなり臭いが残ってしまいます。そこで色合いをがらっと変える際に使ってみたいのがLavishです。 トップページです。右側に画像が表示されていますが、その画像を色分析して特徴的な色をピックアップ、Bootstrapのテーマに合わせています。 別な画像を指定してみました。ぐっと色合いが変化しているのが分かります。 こんな色合いも。 ちょっと落ち着いた感じ。 Googleロゴで試してみました。あまりらしくないかな? Lavishは画像をベースにカラーテーマを設定してくれます。気に入った写真からWebサイトのデザインを決めるというのはなかなかユニークです。取り込んだ後、個別に調整もできるので色々試してみると
InitializrっていうHTML5のテンプレ を15秒で作成出来る(らしい)ツール があるんですが、このWebツールが、 話題のTwitter Bootstrap 2にも対応 したみたいです。人気のフレーム ワークなのでありがたいですねー。 土曜日ですし、軽い話題。15秒でHTML5のテンプレが作れる!と謳うWebサービス・・InitializrがBootstrapに対応してます。これは地味に嬉しいんじゃないですかねー。 右側になんか増えてた!Bootstrapやたら人気ですしね。こういうのは嬉しいんじゃないでしょうか?Initializrはその気になれば本当に15秒で作成出来るので使うといいですよ。性能とか特徴は使って実感してください。 作ってみた 試しに15秒で支度してみました。こんな楽でいいのかな・・・LESS版も選べるので設定項目は好みで設定してくださいませ。 因みに・・・ B
2020年8月31日(月)をもちまして、nanapiに関わるすべてのサービスは終了いたしました。 nanapiは、2009年のサービス開始より「みんなで作る暮らしのレシピ」という考えのもと、ユーザーの皆さまに生活に関する様々な「ハウツー」を投稿していただく投稿型ハウツーサービスとして運営してまいりました。 約11年間にわたって皆さまからご支援をいただきサービスを継続できたこと、nanapi編集部一同、心より御礼申し上げます。 掲載されていたコンテンツなどのnanapiについてのお問い合わせは、nanapi@supership.jp までお願いいたします。 長きに渡りnanapiを応援してくださり、本当にありがとうございました。
昨日開催された WDE ex -vol9 (Twitter TL) の懇親会で「Google がフォントのホスティングやれば良いじゃないか」という話題が出ていたのですが、朝起きたら Google Font API として現実的なものとなっていました。Web Font をホスティングしているサービスは海外で既に幾つかありますが、ほとんどが JavaScript のコードを貼付ける方法が採用されており、中には body 内に記述しなければならないものもあり、エレガントな方法とはいえませんでした。 今回公開された Google の API は JavaScript を使うのではなく、CSS をリンクするだけ。使いたいフォントをディレクトリから選び、リンクした CSS ファイルに変数としてフォント名を記述するだけになります。シンプルかつ簡単です。 <link rel="stylesheet" ty
webサイトのワイヤーフレームが簡単に作れる、オンラインツール。 iplotz web制作で便利そうなwebツール。 デザイナさんに指示を出すときに、ワイヤフレームだけでサンプルを作ることってありますけど、 エクセルだと何だかイメージが沸かないんだよな~ってときがあります。 そんなとき、簡単で便利なwebツールがこちらです 簡単に言うと、ワイヤフレームで簡単にプロトタイプが生成できるwebツールです。 こんな感じのワイヤーフレームが短時間で出来ます。 UIも使い勝手が良いです。 あらかじめ、動画、地図、様々なパーツが用意さていて、随時更新されています。 また、メモ帳が用意されていて日本語もOKになっていて便利です。 オートセーブ機能も便利ですが、うっかり上書きしてしまうので、 外しておいてほうが良いかもしれません。 プロジェクトごとに管理も出来て、共有アカウントを管理できます。 作成途中は
Chimply generates your images ユニークなAjax読み込みアイコンが作れる「Chimply」。 チンパンジー風のキャラアイコンが可愛いアイコン作成サイト。 作れるアイコンは、ユニークで、ほかでは作れないようなものがズラリ。 色なんかのパラメータも当然調節できるようです。 個人的に、以下の物が気に入ったので作ってみました。 これは、便利ですね。 関連エントリ Ajax読み込み画像を作成するサービス++
最近の流行だろうか、ControlCといい、ShiftSpaceといい、サイト名が機能の使い方になっている。分かりやすく、インパクトもあって覚えやすい。そう、ShiftSpaceはShift+Spaceキーで発動する。とは言え、どういうサービスなのかは分かりづらい。 言うなればデザインの共有だろう。サイトのデザインをする際に、あれをこうした方が良い、ここにこういう文言を入れて欲しいといった類の内容をみんなで 共有するのだ。または、サイトをそもそももっと見やすいように変えてしまうという使い方も考えられる。 今回紹介するオープンソース・ソフトウェアはShiftSpace、Webサイトのリデザイン共有ソフトウェアだ。 ShiftSpaceはサーバ側のスクリプトと、FirefoxアドオンであるGreasemonkey上で動作するユーザスクリプトとして提供される。インストールが終わったら、任意のサイ
Drawter.com - DrawAble Markup Language ドラッグ&ドロップで描画して好きなHTMLレイアウトを作成できる「Drawter.com」。 次のように、グラフィックソフトを扱うように、範囲をドラッグ&ドロップで囲ってブロックが作れます。 好みのレイアウトが出来たら、後は、Code メニューから「Generate Code」を選ぶだけでコードが作れます。 ブロックベースのレイアウト作成ツールはありますが、こういった自由な形に作成できるものは珍しいですね。 凄く凝ったレイアウトを作る際になかなか使えそうです。 関連エントリ 質問に答えるだけで1〜3カラムのCSSレイアウトページ生成 ビジュアルにドラッグ&ドロップでCSSレイアウトをデザインできる「YAML Builder」 WYSIWYG型オンラインCSSデザインツール「CSSEZ」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く