ウェブの画面設計に使えるまとめ - DesignWalker
マッシュアップサイトがスパムに成らない為のアイデアノート*アイデアノート
とりあえず自ら運営するサイトに、価値があるかどうか。 最近増えてきたのが 『○○を探しました。』『○○を検索してみると・・・。』『○○に関する記事』 こういう名目でロボットがあらゆるAPIを使って情報を収集し、マッシュアップするというサイトが増えてきている。 ここまでならなんら影響の無い行為だと思う。見てがっかりする事はありますが、それだけです。 でも、そこからトラックバックを自動で送ってくる。 はっきり言ってこれが迷惑だ。 他サイトのデータを使えるという利点を生かし、情報を掛け合わしたり、本家サイトでは見れない表示の方法をとったりと言うのが本来のマッシュアップの利点です。 例えばフリッカーのAPIを利用して、ビジュアル面に特化したしたサイトやツールなどは同でしょうか。 TiltViewer 圧巻です。 今回は、マッシュアップする上でのアイデアを、色々と考えてみたい。 合わせるのは自分と他
画像から色を抽出してくれるカラーパレットジェネレータ『Color Palette Generator』 | CREAMU
画像から色を抽出したい。 そんなあなたにおすすめなのが、『Color Palette Generator』。画像から色を抽出してくれるカラーパレットジェネレータだ。 『Color Palette Generator』は、とてもシンプル。画像を選択して「Send File」することでカラーパレットを表示してくれる。マウスオーバしたCurrent ColorをRGBで表示してくれる点もうれしい。 画像はアップロードするだけでなく、ユーザがアップロードした画像から選択することもできる。 シンプルでとても使いやすいカラーパレットではないだろうか。 画像から色を抽出してくれるカラーパレットジェネレータ、チェックして使っていきたいですね。 このサイトはインターフェースもシンプルでとてもいいな。 今日は天気がよくて気持ちいいですね。最終日がんばろう！
ドラッグ＆ドロップで描画して好きなHTMLレイアウトを作成できる「Drawter.com」:phpspot開発日誌
Drawter.com - DrawAble Markup Language ドラッグ＆ドロップで描画して好きなHTMLレイアウトを作成できる「Drawter.com」。 次のように、グラフィックソフトを扱うように、範囲をドラッグ＆ドロップで囲ってブロックが作れます。 好みのレイアウトが出来たら、後は、Code メニューから「Generate Code」を選ぶだけでコードが作れます。 ブロックベースのレイアウト作成ツールはありますが、こういった自由な形に作成できるものは珍しいですね。 凄く凝ったレイアウトを作る際になかなか使えそうです。 関連エントリ 質問に答えるだけで1〜3カラムのCSSレイアウトページ生成 ビジュアルにドラッグ＆ドロップでCSSレイアウトをデザインできる「YAML Builder」 WYSIWYG型オンラインCSSデザインツール「CSSEZ」
素晴らしいデザインのブログ30選『30 More Excellent Blog Designs』 – creamu
優れたブログデザインを参考にしたい。 そんなときにおすすめなのが、『30 More Excellent Blog Designs』。Smashing Magazineによる素晴らしいデザインのブログ30選だ。 このエントリーでは、以下のカテゴリーにわけてブログデザインが紹介されている。 ・シンプル&ホワイトスペースを活用したデザイン – Simplicity and Whitespace ・ブログに見えないデザインのブログ – Weblogs Which Don’t Look Like Weblogs ・かっこよくオリジナルなブログデザイン – Nice And Original Blog Designs ヘッダデザインや背景、パーツデザインに凝ったブログが多く、刺激になる。 ブログのデザインを考える際に参考になるのではないだろうか。 素晴らしいデザインのブログ、チェックして自分のブログに
MOONGIFT: � クールなボタンを作る「ButtonBuilder」:オープンソースを毎日紹介
アクア風なデザインの流行も収まったかと思うが、それでも様々なサイトで利用されている。透明感、丸みのあるデザインがクールなサイト、ポップなサイトどちらにも使えるのが便利だ。 そんなアクア風ボタンを作るTipsは各種あるが、一つのソフトウェアだけで簡単に終わらせてしまうのがこれだ。 今回紹介するオープンソース・ソフトウェアはButtonBuilder、アクア風ボタン作成ソフトウェアだ。 ButtonBuilderには黒、青、緑、赤、白をベースに細長、楕円、四角など様々な形のボタンが用意されている。後は文字色や配置を決めればごく簡単にボタンが出来上がる。 吹き出し風の画像や鉛筆、中止ボタン風の画像もあり、ボタンだけでなく様々な用途で使えそうだ。大きさや影、幅、文字の配置、背景色、フォントは自由に変更できる。 テキストは一行になっているが、Alt+Enterで複数行の入力が可能だ。サイトのアクセン
MOONGIFT: » Web上の開発環境「Rainbow 9」:オープンソースを毎日紹介
様々なWebアプリケーションが登場しているが、それでも作成はローカル環境で行う必要があり、不便さが残っている。開発すらWeb上でできればどれだけ手軽だろう。 そんな希望を実現させてくれるかも知れないのがこのソフトウェアだ。 今回紹介するオープンソース・ソフトウェアはRainbow 9、Webブラウザ上で開発するソフトウェアだ。 Rainbow 9はテキストエリアをJavaScript、CSS、HTML、XML等が作成しやすいように変化させてくれる。JavaScriptは、その場で実行できるコンソール機能がある。 エディタ上の見た目も、CSSで指定すれば色の変更が容易に行える。補完機能もあり、エディタとしてもなかなか面白い。 そして、HTML、JavaScript、CSSを作成し、その場でプレビューすることもできる。ファイルはタグ情報とともに保存され、後で呼び出すことが可能だ。尚、試してみた
あなたのクリエイティブを刺激するアニメーションサイト『HEMA – online winkelen』 – creamu
クリエイティブなサイトを探している。 そんなあなたにおすすめなのが、『HEMA – online winkelen』。あなたのクリエイティブを刺激するアニメーションサイトだ。 『HEMA – online winkelen』では、ディスプレイしてある商品が動き回る。しかもかなりぶっとんだ動きをする。音もあって派手派手だ。 サイト作成の発想が浮かばなくて悶々としている人には刺激になるのではないだろうか。 あなたのクリエイティブを刺激するアニメーションサイト、チェックしていいクリエイティブを作っていきたいですね。 何かコンセプト誌がほしいな、と思って「TITLe」を買いました。情報満載だけど紙面が綺麗でいい感じ。 これから買っていこうかな。
MOONGIFT: » 文句なしのWiki「MindTouch Deki Wiki」:オープンソースを毎日紹介
完成形を見てしまった気がする。それくらいできが良い。 これまでWikiエンジンを幾つも紹介してきた。もちろん、機能面ではもの凄く充実しているものも数多い。だが、使い勝手や初期状態での機能等を考えると、これがまさに完成系と言えるのではないだろうか。 今回紹介するオープンソース・ソフトウェアはMindTouch Deki Wiki、エンタープライズ向けのWikiエンジンだ。 欠点がなさすぎる。日本語はもちろんOK、Ajaxを使って遷移の少ない作り、履歴管理＋差分表示にももちろん対応している。編集はWYSIWYGなテキストエリアでできる。 ヘッダを作れば、その中だけで編集できる。画像をアップロードして、埋め込むのも簡単。ページの階層管理もできて、タグも使える。ウォッチリストに登録、コメントをする、RSS配信など何でもござれだ。 さらに多言語対応、Google Analyticsを埋め込めるなどな
Webアプリ開発に使える便利ツール20選『20 tools for web application development』 – creamu
Diary Webアプリ開発に使える便利ツール20選『20 tools for web application development』 開発をもっと快適にしたい。 そんなあなたにおすすめなのが、『20 tools for web application development』。Webアプリ開発に使える便利ツール20選だ。 以下にいくつかご紹介。 » Textmate Mac OS X用のテキストエディタ。シンプルだが多機能 » Skedit Mac OS X用のテキストエディタ。TextmateよりもWebデザイナー向き » SnapNDrag Mac OS X用のソフト。スクリーンショットが撮れて、それをPhotoshopなどにドラッグできる » Incubator Mac OS X用のマインドマップ作成ソフト » SQLEditor Mac OS X用のERD作成ツール Webアプ
画像一つ使う際にもユーザーが何を感じ取るかを考えよう（powered by beBit） | SiMPLE*SiMPLE
※ 今回の記事は「ウェブサービスインターフェース勉強会」でのbeBit社のプレゼンから。 beBit社から「画像一つでもコンバージョン率がこんなに違う」という事例を紹介してもらいました。今回事例としてご紹介いただいたのはある住宅ローンサイトの画像について。 ↑ 説明してもらった同社コンサルタントの土井さん。 あなたは住宅ローンサイトで「お問合せはこちらから」というページをつくるとしたら、そこにどんな画像を使いますか？ やわらかい印象のイラスト、ヘッドセットをした女性が電話に出ている写真、などが候補にあがると思いますが、ユーザビリティテストの結果、一番効果的だったのは・・・（考えてみてください）・・・「男性社員の写真」でした。 よく「お問合せ」というと「女性のオペレータ」を連想してしまいますが、大事なのはこれは住宅ローンのページだということです。 実際にテストをしてみると「支店にいるようなロ
MOONGIFT: » XHTMLにも対応したWYSIWYGエディタ「Whizzywig」:オープンソースを毎日紹介
※ 画像は公式サイトデモより。 テキストエリアをHTMLオーサリングツール風にするソフトウェアは各種存在する。有名なものとしてはFCKEditorやSPAW Editor、Xinhaなどがある。 この手のソフトウェアの難点として、HTML構造は汚い事が多かった。XHTML Validなサイトを作っている場合はこれを使ってみる事をお勧めする。 今回紹介するフリーウェアはWhizzywig、Webベースのリッチテキストエディタだ。 Whizzywigは各種文字装飾をボタンを押すだけで簡単にできる。画像挿入（アップロードには未対応）、テーブル組もできる。日本語はまだだが、多言語対応も想定されている。 そして最大の特徴とも言えるのがXHTML Validなソースを作成できる点だろう。イメージタグも<img 〜 />のようになる。また、独自のCSSを認識させる事もできるので、見栄えと照らし合わせなが
WEB色見本 原色大辞典 - HTMLカラーコード
原色大辞典とは 原色大辞典は1997年にオープンしたネットの色見本サイトです。 9種類の色見本と色に関する各種サービスから構成されています。 色見本コンテンツは ブラウザで定義されているHTMLカラーネーム、 日本の伝統色、 世界の伝統色、 Webセーフカラー、 パステルカラー、 ビビッドカラー、 モノトーン、 地下鉄のシンボルカラー、 国鉄制定の塗装色 の9つから構成され、特に日本の伝統色は古来伝わる先人の色彩感覚を現代に伝えるものとして多くの方々から支持をいただいています。 文字列と背景色の組み合わせを試せる配色大辞典、 規則性のある組み合わせから色を選べる配色パターン。 色見本の他にも、今日のラッキーカラー、 コトバから色を解析して調合する成分解析、 ストライプを生成するストライプメーカー、 グラデーションを生成するグラデーションメーカー、 あなたの好きな色と色を調合する色調合、 サ
使っていないCSSをWEBから簡単チェック「CSS Redundancy Checker」:phpspot開発日誌
CSS Redundancy Checker 使っていないCSSをWEBから簡単チェック「CSS Redundancy Checker」。 使っていないCSSのセレクタをあぶりだして、CSSのダイエットをすることが可能なツールです。 まず、(Step1)スタイルシートのURL を入力し、その後、(Step2)にスタイルシートを用いたページすべてを入力します。 そして、(Step3)「Check」ボタンを押せば、チェックを行ってくれます。 すると次のように、使用していないセレクタが一括して表示されます。 CSSのサイズが肥大化して困っているという方に便利なツールですね。 関連エントリ JavaScriptとCSSの両方を圧縮できる「YUI Compressor 2.0」リリース CSSデバッギングツール１０選
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Shopping cart for selling downloads and tangible goods. Works with PayPal, Stripe, Authorize.Net, 2Checkout, Razorpay, Paytm
web制作屋は、一体どのスキルを持っていれば即戦力なのか？17の作業に分解
RSSやデスクトップ用のアイコンが詰まったアイコン集「FreshIcons」:phpspot開発日誌
丸っこいデザインが可愛いアイコン48集「3D Cartoon Icons」:phpspot開発日誌
簡単に設置できるWordPressのお問い合わせフォーム -WP Contact Form III
フリーCGI 無料ショッピングカート CGI's