なかなか面白い試みだったので 備忘録。現在数多くのjQueryを 使用したギャラリーが存在し、その 中には多くのLightbox風ギャラリー が存在します。今日、ご紹介する のはそんなギャラリーを作成する ソフトウェアです。 jQueryを使用したギャラリーを作成するジェネレーターになりますね。ちょっとこの発想はありませんでした。 オンラインのジェネレーターではなく、ローカル環境で動かすソフトウェアです。使い方も凄く簡単ですよ。 言語も日本語に対応しています。 わずか3STEPで作成出来ます。 STEP.1 使い方はDLページにも書いてありますが、簡単にご紹介。おそらく直感で作成出来ます。ソフトウェアをDLしてセットアップすると上記画面が立ち上がります。ここにギャラリーにしたい画像をドラッグ＆ドロップしていきます。 STEP.2 画像を決めたら、上部のPublishをクリックします。すると

Webフォントを使う機会があった のでついでに備忘録的メモです。 @font-face関連の情報いろいろ。 と言っても、まだそんなに情報が 無いので触りを理解するための まとめ的な記事です。 Webフォントの良い所は、編集作業が不要、コピペも可能でテキストだからSEO的にも有利になりますけど、アンチエイリアスはフォントに依存しますし、日本語フォントはどうしても少なくなってしまうデメリットもあります。 クロスブラウザでWebフォントを利用するには /* IE */ @font-face { font-family: abc; src: url(abc.eot); } /* Firefox, Opera, Safari */ @font-face { font-family: abc; src: url(abc.ttf) format("truetype"); } としてあげるといいみたい。I

カラースキーム、配色関連のツールの 大半は海外サイトのものです。僕も海外 のサイトを利用していますが、やはり 日本語の方が良いよねという方も少なく 無いかと、ふと思いましたので国産の サイトでカラー選定、配色支援に役立ち そうなツールを探してみましたのでシェア。 海外のは海外ので似たような機能のカラースキームツールばかりにもなっているので国産に目を向けてみるのも良いかもしれませんよ。ツールの前に配色を学びたいという方はwebデザイナーの色彩スキルを磨くエントリーまとめというエントリをご参照ください。 NIPPON COLORS – 日本の伝統色 まだ出来たばかりのツール。和の色専門ツールですよ。デザインも使用感もかなり素敵です。環境によってはうまく表示されないかもです。 NIPPON COLORS – 日本の伝統色 色サンプル(色見本と配色) もっと評価されて欲しいツール。明暗や、系統でカ

JSを使ったWebデザインをしたい方 のインスピレーションに良さそうだっ たので記事に。jQueryやmootools、 Prototypeなど、人気のライブラリを 駆使したサイトのみをショーケース化 しているギャラリー、Not Coffeeの ご紹介です。 数はさほど多くは有りません（150~160ほど）が、今後に期待したいギャラリーです。デザインも素敵なものばかりなのでインスピレーションと更なるjsの使い方の勉強にもいいかもですよ。 ギャラリー形式になっています。jQuery、mootoolsなどのカテゴリで分けられているのでライブラリ別で探せます。 サムネイルにマウスオーバーすると必要な情報が出てきます。どのライブラリがどこに使われているか（これはタグで分けています）などが直ぐに分かりますので探しやすいですね。 以下のようなサイトが掲載されていました。 Alex Buga’s Liv

個人的にWordPressで困っていたのが アップロードした画像を1つ1つ投稿画面 に入れていく作業。かなり面倒でした。で、 そんな悩みを解消できるプラグインが あったのでご紹介します。function使って 出来ない事も無いんですけどね・・ 画像を多く使うブロガーさんも多いかと思いますが、このプラグインでアップロードした複数の画像を投稿画面内に一気に入れられるので執筆時間も減らせるかと思います。 ただ、2.8では動かないっぽいです（ローカルでしか試していませんけど）。 プラグインの用途はギャラリー作成ですが、複数画像の一括投稿が個人的に嬉しかったのでその視点で記事を書いています。 複数アップロードした画像をいちいち画像追加ボタンで1つ1つ投稿、の繰り返しが不要になります。 使い方 簡単に使い方を。まずは普通に画像をアップロードします。プラグインが有効になっていれば、投稿画面下部に上記のよ

面白かったのでご紹介。あなたの 素敵なサイトを酷くしてくれる誰得 サービスです。13年ほど前に良く ジオシティーズで見かけたような 感じにしてくれますよ。 このWebサービスはURLを入力するだけですので簡単に懐かしい思いに浸れそうです。動作も速くてサクサクと酷いデザインにしてくれますよ。 見た目もしっかり酷く作られてます。素敵。上記のようにURLを入力するとそのサイトが懐かしい感じに。 試しにやってみました。僕のブログだと中途半端でした。。 綺麗なデザインとして定評のある3サイトでもやってみましたよ。 ぜひ、サイトに訪れて素敵なデザインと比較してみてください。 Webクリエイターボックス こんな完成度の高いデザインのサイトが こうなります。サイドバーでなにかが動いてる・・！ Webクリエイターボックス Photoshop VIP こんなクールなデザインのサイトが こうなります。背景が・・

個人的に大好物の手書き風な Webデザインを作りたい時に 役立ってくれそうなフォントや テクスチャ、アイコンなど、無料 のリソースをメモしておきます。 手書き風と言っても色々あるのでこのまとめは偏ったものになっているかも知れません。参考程度にして頂ければ幸いです。全ては掲載出来ないので個人的に好みのリソースを厳選します。 日本語フォント ふい字 かなり使用条件を緩くしてくれている有名な手書きフォント。 ふい字 みかちゃんフォント こちらもかなりオープンに配布してくれています。 みかちゃんフォント あんずもじ 縦書き用も含まれています。こちらも有名なフォント。 あんずもじ ひま字 基本的には商用でも利用可能ですが、よく規約を読んで。可愛くて使いやすいです。 ひま字 ミウラ Liner ジュニア 漢字もがっつり入った素敵なフォント。 ミウラ Liner ジュニア 衡山毛筆フォント 著作権を放棄

デジタル一眼レフカメラを去年の 4月に買ってから、Webデザイン の際に「買ってよかった」と思った 事を挙げてみます。多くの方には 常識かも知れませんが、ここまで 役立つならもっと早く買えば良かった。 僕は今も昔もデザインセンスが皆無に等しい人間ですが、それでもデジカメのお陰で救われている事が多く有ります。「デジカメ買ってよかったなぁ」と思う瞬間を綴ってみます。一応内容は、フリーの方向けです。当たり前の事しか書いていませんのであまり参考にならないとは思いますが。。 写真を探す必要が無い 場合によっては自分では手に入らない写真もあるのでフリーで使える商用可能な写真の効率的な5段階の探し方という記事は凄く参考になると思いますが、やはり時間はそれなりにかかりますし、イメージしたアングルで無い場合も妥協せざるを得ませんが、普段から撮っている写真の中で使えるものがあればそれを使うだけなので探す時間は

ちょっと珍しいテーマがあったので ご紹介。Web漫画用のテーマです。 comicpressといいますが、レイアウト をいくつか選択できる等、漫画に適し たテーマになっているようです。フリー で利用できますよ。 なかなか珍しいですね。漫画の事はあまり詳しくないので何とも言えませんが、捜している方もいるかなと思ってエントリーします。漫画に限らず絵師さんのイラストビューなんかにも良さそうですね。 かっこいいサイトですね。。ネタかと思いました（失礼）が、ちゃんとしたプロジェクトのようで、専用プラグインも配布されています。 選べるレイアウト こんな感じでレイアウトを選択できます。 プラグイン 同サイトで専用のプラグインも5つほど配布されています。 以下よりDL可能ですのでご興味のある方はお試しになっては如何でしょう。 comicpress

Photoshop関連のまとめです。 ブラシやパターン、シェイプ チュートリアルを書いている ブログ、プラグイン、アクション などなどのまとめ、というか 個人的なリンク集です。シェア したいと思ってエントリします。 おそらく抜けてる有益サイトもありそうなので参考程度になさってください。海外サイトが殆どにどうしてもなってしまいますが、殆どは図解入りなので、英語が読めなくてもある程度分かるかと思います。バージョン、ライセンスに関しては表記し切れませんので個々でお確かめ下さい。 配布サイトはフリーをメインにしています。あと、カテゴリ分けはしていますが、結構適当です。 配布サイト ブラシ・シェイプ・パターン ブラシや、カスタムシェイプ、パターンの配布サイト WeGraphics / フリーブラシカテゴリ。11セットほど配布 Brushesdownload / ブラシ配布専門のサイト Gfxfeve

Photoshopのブラシを検索できる FindBrushesのご紹介。検索と 言うか、アイコンを探せる検索 エンジン、Iconfinderと同様で、 インデックスされたブラシを検索 する形ですが、量はかなりのもの。 目的から探せるのが検索系のいい所ですよね。FindBrushesには現在600セット以上、総計12000種以上もストックされているので覚えておくと役に立ちそうです。 シンプルな設計ですし、軽いので探すには最適かも。 カテゴリからも探せる 左上のメニューからカテゴリで探す事も可能なのでキーワードが思いつかない、という方はカテゴリで探してはいかがでしょうか。 例1・グランジ系を探したい グランジ系のブラシをお探しなら「grunge」で検索します。数は90と出ますが、ブラシはセットになっているので量としてはかなり豊富ですね。 例2・木のブラシを探したい treeで検索。検索スピード

技術をやソフトを除いてWebデザイン時に 個人的に役になってるなぁと思うものを あげてみます。これがあるから時間短縮 できたり、自分にとって満足できるデザイン に出来たり、無いと結構困る、といったモノ。 タイトルはシンプルにしましたが、内容は「センスの無い僕をWebデザイン時に助けてもらっているもの」です。 こういったものは人それぞれだと思います。あって当たり前、基本でしょｗという方もいらっしゃると思うし、これが何の役に立つの？という方もいらっしゃると思いますので参考程度になさってください。 配色パターン 配色だけでデザインは良いものにも悪いものにもなると思っています。 カラーコードを覚えられないので良いと思う配色は必ずローカル環境にストックするようにしています。これを使って微調整をしたり、合うものが無ければオンラインのカラースキームジェネレーター等を使います。 配色は時間が掛かるのでサク

無料でクオリティの高いPhotoshop のブラシのみを扱うWebサービスの WOW Brushes!をご紹介いたします。 数は100以上あり、ベクター素材も フリーで配布しているようです。 なかなか探すのが面倒なので有りがたい。 ライセンスはおのおのご確認ください。 WOW Brushes!では以下のようなPhotoshopブラシを無料で配布しており、メンバー登録不要でダウンロードする事が可能です。 まだまだありますので配布サイトの一つとしてストックしておいてはいかがでしょう。 WOW Brushes! ついでに他の配布サイトも載せておきますね。 Qbrushes Brusheezy! myPhotoshopBrushes.com getbrushes.com chez plumeau PSbrushes BRUSHFED Ladyoak blendfu.com FBrushes Dez

小粋の定義は分かりませんが、ちょっと「おっ」と思えるcssのテクニックをいろいろと。以前、記事にさせていただいた、ｃｓｓとHTMLのみで3D効果を実現したテクニックで他にも無いかなと思って同様に驚いたテクニックです。 3Dのテクニック同様に実用性があるかどうかは考えていませんが、何かのヒントになるかも・・と思い、cssplayでちょっと探してみましたのでいくつかのｃｓｓを使った良アイデアや高度なテクニックなど。 ざっとしか見ていませんが、多分jsは使ってないと思います。 Film strip gallery with information text ネガポジ加工された画像にフィルムのような枠をつけてマウスオーバーで写真を表示するギャラリー。 Film strip gallery with information text Super animation – just for the fu