2007年1月。私がブログを始めた同じ月にミャンマーの青年が個人でも商用でも無料で使えるFreeFlashTemplateというサイトをオープンさせました。Flashのテンプレートを無料で提供というスタイルですね。 とても素晴らしいソースとして、結構使われた人も居るかもしれません。ある程度広告収入と言う方法で軌道に乗せたNetDNAは、その一年後2008年に、FreeCSSTemplateというサイトも同時に発足。 そして現在。総テンプレート数が335個。 改めてこのサイトを見ると、かなり優れたものが多いので、だいぶ前に紹介した気がしないでもないのですが（他のブログでみただけかも）、再度ご紹介したいなと思います。 とりあえず使う前の注意 個人、商用問わず利用可能です。作品を複製、頒布、展示、実演することができます。二次的著作物を作成することができます。本作品を営利目的で利用することができま

webデザインの入門書を買おうか迷っている方。 もしもそんな方がいたら、ネット上にはここを押さえておこうよと、webデザイナーが直接良質な記事を仕上げてくれていますのでそちらを是非一度参考にしてみて欲しいなと思いまとめて見ました。 また、その記事で、もっともぐっときた台詞もチョイスすてみました。 どんな想いで記事を書かれているかというのも大事かなと。 こちらもあわせてどうぞ。 Web制作をこれから始める人の為のスキル・HTML・CSS・ブラウザ・写真素材入手の基礎情報 とりあえず時間のない人はこの3つだけでも食べて デザインを勉強したことがない人でもデザインできるようになるかもしれない4つの基本原則 最初、デザイナーは型破りであるというイメージを抱く人も多いのですが、実際の現場では、様々な原則の上にあるルールにのっとり、そのルールを崩す「理由」があります。 例えばそれがセンスと呼ばれること

今回は、Web制作の現場でも使えるようなユーザビリティテストの方法をご紹介します。 アクセス解析を使ったものではなく、あくまでもサイトの構造の問題点を洗い出す方法です。 そのため、それにいたる細かい基本部分についてもかなり大胆に触れてます。 試験をする前に、どのような観点からサイトを見て行く必要があるのかと言うユーザビリティの原則から、試験方法、試験の結果からの問題解決にむけて、私がこれまで行ってきている仕事の一部をご紹介します。 Webユーザビリティについて：目次 書き出したらとまらなくなりましたが、これでも結構情報削りすぎたかなぁというのはあります。 私の仕事について方法を学べばユーザビリティテストは出来る最大の原則はユーザーに考えさせない事たった一人でも試験をするほうが100倍ましになるユーザーの視点を理解する箇所法則1「長いテキストを最初からよし見ようとは思わない」法則2「長たらし

webサイトにおけるユーザーの視線は、なかなか見る事が出来ない代物ではあります。 実際に企業や、あなたが作成したwebサービスが、ユーザーに訴えたい事を、ユーザーにきちんと届ける為に、どのような方法があるのかを考えて見ましょう。 １）全ての情報を遮断する 手っ取り早い方法としては、あらゆる情報を遮断する方法があります。 つまりその言いたい事意外の情報をあえて隠蔽するわけです。 実にシンプルな方法です。 ただし、シンプルであるがゆえに非常に難易度が高いです。 なぜなら、配置するテキスト選びは慎重にしなければなりませんし、訴えたい事が多い場合、何をまず訴えるべきかをしっかりと考えて、ユーザーが迷う事なく、そして的確な操作が出来るように誘導して上げる必要があるからです。 １）サービスに対して興味を少しだけ持ってもらう情報を書く ２）サービス開始はちょっと・・・という人のためにクリックしやすいリン

もはやこの業界ではかなり浸透しつつあるjQuery。 今回はそんなjQueryにスポットを当て、本年度紹介された中でも、ホットなトレンドプラグインをご紹介します。 ※プラグインつかってないのもあります。 １）3D表示プラグイン サンプルデモ 今年のトレンドと言えば3D。 というわけでこちら。まずはサンプルデモを確認。 触ってわかる通りですが、2枚の画像が3D表示されます。 呼び出す $(function() { $('#mindscape').smart3d(); }); HTML <ul id="mindscape"> <li><img src=".../mindscape1.png" /></li> <li><img src=".../mindscape2.png" /></li> </ul> CSS #mindscape { width: 720px; height: 170px;

無料素材配布サイト「足成」。 当ブログでもよく使っているサイトですが、このサイトがこのたび、女性アーティストユニット「SALBIA」の３人をモデルに、生活観のある女性の写真素材としてリリースいたしました。 これは必見ですね！ デビュープロモーション 2010 年10 月にシングル「GIFT」でデビューした女性R&B ユニット「SALBIA（サルビア）」とのコラボ企画を実現。デビュープロモーションの一環として、「SALBIA」メンバー三名の人物写真を、フリーの写真素材として配布を開始しました。 これ、実は結構すごい事で、今後もこうしたデビューにあわせて企画を合致させてくれると、どんどん写真素材が増えていくって言う寸法。 これは応援しないわけには行きませんね。 因みにこの足成。写真素材は、転売はもちろんダメですが、Web ページ制作やニュース記事のイメージカット、企画書等の様々な用途でクレジッ

多くのwebデザイナーが、行き詰ったときに吐かれる台詞。 それが『センス』です。 センスがない、というのはよく聴く言葉です。 しかし、色彩感覚とは『センスの問題』ではなく、たんに勉強不足というケースも少なくありません。 今回はそんな色をテーマにしたエントリーをまとめて見る事にします。 とにかく最初に学ぶ基礎 この色彩系の分野においては圧倒的にwebクリエイターボックスブログが強いので、その中でこれは使えるぞというエントリを何個か抽出しています。そのほかにも、ちょっと古い記事でもとても参考になるものからもご紹介いたします。 正直私のブックマークが配色、色彩、色で60近くのエントリーがありました。 色で学ぶ部分と言うのは「広く浅く」では無く、どちらかと言うと「狭く深く」のほうが強い気がします。なので、そのブックマークの中から、かなりというかもう限界まで厳選した物をご紹介いたします。 配色パター

文章力がないためにプレゼンに失敗した、会話がうまくできずにプレゼンに失敗した。 こういう経験はなかなか無い。なぜなら多くの場合、失敗したことに気がつかないからです。 こうした失敗に気づくためには、ある程度正解、もしくは成功した話を聞くのが一番です。 というわけで、プレゼン力をつけたいという方の為の膨大なエントリーを、私のYamadaフィルタでふるいにかけ、厳選したものをご紹介いたします。 １）上司が“唸る”報告書 の書き方 もはや上司どころか、そこらへんのユーザーすらうなってしまうほどの破壊力のあるエントリ。 かなりブログの書き方に似てる部分もあり、とても参考になりました。 ２）チームのパフォーマンスを最大限に高めるために--5つの心得 以下の内容について細かく説明されています。 若干プレゼンと離れますが、チーム全体をプレゼンしつつ成功させるという点が個人的に感じた部分だったのでご紹介。

フッターの美学。 そんな素敵サイトを紹介しようといくつかチョイスしていたら海外ブログのDWSが「The 200 best footers on the web」なんていう化け物エントリーをさらっと出してきたもんだから驚きだ。 しかもクオリティもめちゃ高い。 なので今回はこのエントリーを紹介して終わろうかなって・・・。 参考までにネタ帳が好きなフッターを７つほど紹介します。 たま、フッターまとめサイトの楽しみ方も一応書いておきます。 以下からどうぞ。 すばらしいフッターデザイン２００ The 200 best footers on the web « Web Design Shock もはやひとつのショーケースというか一冊の本になってもおかしくないクオリティの記事です。 ご堪能あれ！ 中でもネタ帳がお気に入りのフッター７つ Tomáš Pojeta | kreativní grafik ここ

Webサイト制作で欠かせないのがフォーム。 これらは購入時や、お問い合わせ、ログインと言ったパーツで良く使われます。 今回はそんなフォームにスポットを当てて、なるべく使いやすく、導入しやすいものをご紹介いたします。 ただし、あくまでもjQueryプラグインのご紹介なので、よくわからないと言う方は華麗にスルーしてください。細かい導入方法までは説明しません。 機能性重視プラグイン In-Field Labels jQuery Plugin フォームの中に入っている文字がオンクリックでうっすらと消えていくプラグイン。 なかなかいい感じ。 Create a Progress Bar With Javascript | Nettuts+ demo シームレスにフォームの内容を変え、さらにどれくらい進んでいるかが％で確認できる。 overset - jVal - jQuery Form Field V

ちょいと古めのうっとりくるサービスやエントリーを持ってきました。 なんて事はない。私がお勧めする2009年度に話題になったwebサービスや、ジェネレータを中心に、厳選してお届けいたします。 Twtiiter関連多し Twitterプロフィール検索 その名のとおりついったーのプロフィールを検索する検索エンジン。同じような趣味を持っている人を探すときなどに使われる。 ついったーの友人関係を可視化するwebサービス 友人関係というか会話関係があられもない姿で現れる恐ろしいサービス。 TweetLevel ついったーの影響力を測定するサービス。 影響力というか戦闘力。やってる事は単純なサービスなんだけど、こうやってしっかりデザイン組んで作り上げるところが本当に参考になった。どんなサービスであれ、愛情は見習わなければならない。 Twib - Twitter ホットエントリー Twitterでのホッテ

40素材パックを見逃すな！ 以下。 40 Absolutely Free Vector Pack Collections 一つ一つが濃厚でクオリティの高いベクター画像集ページにつながっている。 たとえばそれは 人の姿をしたシルエットであったり。 様々な要所で使えるオブジェであったり。 きらびやかな装飾であったり。 iPodであったり。 綺麗なタグであったり。 様々なものが収録されていますので、興味を沸くものや、今後使えそうなもの、また、探していたものが見つかるかもしれません。一度はすべて目を通しておくのも良いかもしれませんね。 それでは、また。

最近会う人たちによく言われるのが 良質なコンテンツってどうやって作ればいいですか？ という質問があります。 難しい質問でもありますが、ビジネスブログを活用して商売の枠を広げたい人が多い中、コンテンツを作る方法がわからない人が非常に多いのも事実です。 これまでの経験から言えば、コンテンツを作るのが苦手な人は、共通してブログ記事の『テーマ』を見つけたり、決めたりするのが苦手な人が多いのです。 そこで今回は、手軽にコンテンツを作成する方法を書き記します。 はじめに 第一に、小難しい事を考えると書く人の手が止まります。 なので、難しい事を考えず、かつ、手軽に書くために 「自分の体験、経験を書く」と言う事を意識しましょう。 しかし、ただ単に体験や経験を書くというのは日記になります。 日記の類になると、多くの人から見て、コンテンツと呼べるものではなくなります。 つまり、あなたの事を既に知っている人や、

最近、副業に手を染めたいアナタへ贈る11選とか、教えて君ネットがゴールデンウィーク前に仕掛けたXPやVistaを極限まで軽くする！ 19のチューニングテクとかを見て、『あーなるほど！』って思った事がありまして。 よーく見るとまとめなんですが、自分のところの記事を、これまたうまい具合にまとめてあって、これはこれで、地味に価値のある行為だなぁと感じた次第です。 そんなわけで、早速ネタ帳でもまとめてみようと思いました。まぁ、いざまとめようと思うとまとまらないもので、今回はwebサイトを作成するときに使いそうな色々をまとめてみました。 webサイト作成前のデザインを決められないでいる人には 100のCSSギャラリーサイト 膨大なハイクオリティサイトを見る事が出来ます。 悩んでいるならまず他の人を見てみるのもいいかもしれないですよ。 webサイト作成時にサイトカラーを決められない人の為のwebサービ

第３回目の特集は、記事の内容を少しだけレベルアップさせるテクニックです。 今回のトレーニングを全て終えた時、あなたのブログは少しだけレベルアップするかもしれないです。 あまりギスギスせずに記事を書きたいんだという方はそれでも良いと思います。 難しい事を要求するわけでもありません。特に、社長ブログや、社員ブログなどの、ぞくにいう『ブログ初心者』の方々を相手に考えた方法です。次の３つのステップにチャレンジしてみると、いつの間にか身についてしまうと思います。 興味のある方は是非やってみてください。やってダメだったら自分流を模索してみるのも悪くありませんので！ 要点分解トレーニング さて、記事を書く前に、必ず記事にしようと思うネタがあるはずです。 ネタがないのに書こうと思ってかける人なら素晴らしいですが、大体事前にネタがあるはずです。 そのネタを、まず分解する事。 これがこのトレーニングの肝です。

最近相談を受けるケースの多いビジネスブログですが、なにかと失敗しているブログを良く目にします。 何が駄目なのといわれるとそれはもう全部だめですねといっても良いくらいダメなブログになってしまっているケースも少なくありません。あなたのビジネスブログは大丈夫でしょうか？ ここに書いた7つの失敗は、これまでの経験から『改善する事で固定ファンが増えたリスト』です。 もしもドキッとしたら改革のチャンスかもしれませんね。 はじめに『ビジネスブログは見える化の場であれ』 ブログによって得られる効果は様々ありますが、ビジネスブログの基本は、３つの理念によって支えられています。 『情報の共有化』『仕事の見える化』『販売の促進』 この３つを念頭に、ブログの『記事』を『作り上げる』必要があります。 つまりこの３つのバランスが取れていなかったり、押し売りスタイルのみの記事では、ユーザーの心を捉えるどころか、『会社の

アイコンまとめ祭り。 今回は量も量なので画像は小さめ、クリックすると拡大方式を使っています。 ※無料ダウンロード可能なハイクオリティアイコン総まとめ2013年版にて、最新の無料アイコンをご紹介しています。 無料アイコン　１～１０ Free Icon Pack: Web Injection - Tutorial9 システムアイコンやRSSアイコンなどの詰め合わせ。 タグがいい感じすぎる。 mfayaz's Art Blog: FreeHand_ColorStroked icon pack オープンソースで出来たもの系のアイコン集。しかも手書き風。 IconTexto: Drink Web 2.0 各種ソーシャルサービスを空き缶アイコンにしたもの。 Freebies Aggregator: Vector Social Media Icons わざとダサめのアイコンに仕上げてある感じがいい。 H

フォトギャラリを作ろうとしたときの参考になりそうなのがありました。 興味のある人は是非一度触ってみるといいかもしれない。 色々なFlashフォトギャラリー Make Your Visitors Be All Eyesより 色々ありますが、とにかくお勧めが以下。 SERGEY TYUKANOV ARTWORKS これはすごい。 訪問すると目の前に扉があり、中へはいっていく。 中は美術館となっており、展示絵はマウスポインタを乗せると拡大し、絵を見て回れる。 ここまでは確かによさげだけと普通。 これから下にある紙をクリックすると・・・。 びゅーっと中を歩き出す。 仕組みとしては触ればわかりますが、単純な仕掛け。 ただ、こうして美術館の中をあるくような臨場感は、とても素晴らしい。 上記で紹介した記事には、さらにFlashのCMSについて書かれている。 実際にダウンロードして見た。 ものすごく簡単な

とりあえず自分がこんなまとめがあると後でつかうだろうなぁというものをかき集めてみました。 ページ自体を少しでも軽量化したかったので画像は、そのサイトをイメージできるだけのサイズにカットしています。テキストリンクだけだとあとでわからなくなる事が多いので、必要最低限のシンボルとして表示しています。 商用可能な写真素材サイト 5000 Free Stock Photos ノーアカウントで5000の写真と8000のクリップアートがダウンロードし放題。 Free Photo - Cepolina Photos 画像数8000超え。お勧め。 Free Photos, Free Stock Photos, Photography BurningWell Image * After 現在21000点以上の素材がダウンロードし放題。 FreeDigitalPhotos.net 600pxくらいまでの画像は無

多いｗ そして画像がでかい！ 無料で使えるテクスチャまとめサイトのご紹介。 個人向けプロジェクトなので商用不可っぽいです。 カテゴリ別に色々ある サイトは以下から。色々あります。なんこかカテゴリをご紹介。 ZenTextures 紙 木目 本カバー ピンボケ ストーン 塗料 煙とかその他 その他テクスチャサイト メタルカーボンテクスチャ ライセンスはCC3.0。 色々な紙テクスチャー ライセンスはそれぞれの画像先を確認。 紋様テクスチャー色々 紋様。いろんなのがありますね。 テクスチャの使い方がうますぎるサイトまとめ 使いどころに悩んだら参考にしてみるといいかもしれないまとめ。 紙素材にマッチするアイコン よく考えたものですねぇ。 紙写真テクスチャ。テクスチャ？ Yamadaって書いてみた。 色々あるもんですねぇ。 時にはweb制作やブログ作成のお供にお1ついかがでしょうか。 それでは。ま