今回は、『コーポレートサイトというジャンルで、いかにしてオリジナリティあるデザインをするか？』をテーマにコーポレートサイトの事例紹介と、カヤックサイトのデザインを使ってデザイン手法をお伝えします。 手の内見せて競う！ 制作会社のコーポレートサイト 企業のブランドイメージをビジュアルで表現する、コーポレートサイトのUI。 中でも、Web制作会社のサイトでは、自社の技術力を駆使し、斬新性を打ち出すことで個性を競っています。 国内外のWeb制作会社やデザイン会社がどのような方法でオリジナリティを打ち出しているかを、いくつかのUIパターンや表現手法に沿って紹介します。そのうえで、今回のカヤックのリニューアルで、皆さんの気になっている点を説明します。 最旬！世界の制作会社コーポレートサイト事例　30 ここでは、参考にしたサイトからトップ29サイトを厳選して、以下の8つのカテゴリに分類してご紹介します

Photoshop Tip: Sharpening with Photoshop's High-Pass Filter | GoMediaZineで紹介されているTipsがとてもいい感じなのでご紹介します。 写真がなんとなく眠いというとき（特に、リサイズした後など）、［シャープ］フィルタや［アンシャープマスク（USM）］フィルタを利用されている方が多いと思います。 このTipsでは、［ハイパス］フィルタを利用するというものです。 写真を用意します。 command+Jキーで背景レイヤーを複製。 ［フィルタ］メニューの［その他］→［ハイパス...］を選択。 ［半径］を「10」程度にして、［OK］をクリック。 ［レイヤー］パネルで［描画モード］を「オーバーレイ」に設定。 仕上がりを見ながら、［不透明度］を変更。 不透明度の変更を行うには、スライダをドラッグするよりも、テンキーを押して（「40％

ＷＥＢの世界には本当に数多くの「素材配布サイト」さんがいらっしゃいます。それらの中には「使用料無料」を掲げたサイトも多く、ワタクシも良く使用させていただいております。 しかしながら、「使用料が無料」で、なおかつ「商用利用も可能」で、さらに「クレジット（著作権）表記が不要」で、おまけに「バックリンクが不要」という素材というものは、実はなかなか無いものです。 比較的多いのは「ＣＣ（クリエイティブ・コモンズ）ライセンス」というライセンス形式ですが、こちらは例え使用料がフリーだったとしても、クレジット表記は必ず行わなければなりません。 また、使用料は”個人使用に限り”無料、という形式も多いですね。商用の場合はバックリンク必須だったり、別途料金がかかるというパターンも比較的多い気がします。 今回のエントリーは、「使用料が無料」という切符の良い素材配布サイトさんの中でも、「商用利用も可能」で、さらに「

WEB制作を行なうにあたりそのサイトの雰囲気を大きく左右するのが背景。色だったりパターンだったりテクスチャだったり様々な背景がサイトのテイストに併せて展開されていますが、今日紹介する「PatternWall.com」はそんな背景パターンをダウンロードできるWEBサイトです。 上記のようにグリッドに背景が引き詰められており、選択する事で、全面がその徘徊に切り替わります。さらにDownloadのボタンをクリックする事で、表示されている背景がjpgでダウンロードで切ると言うものになっています。 詳しくは以下 クリックすると、選択した背景に切り替わる。ものすごくシンプルで全く迷う事がない潔いWEBサービス。配布されているパターンファイルは割と大きめなものなので、目の細かさなどはリサイズすれば調整できそうです。 全体的にはPOPなパターンが多いような気がします。まだリリースされたばかりで背景パターン

TOP  >  Design , Photoshop  >  キレイ目なグランジテクスチャ「30 Awesome Textures for Creating Subtle Grunge Designs」 質感を演出するのに非常に便利なグランジのテクスチャ。グランジと一言に行ってもその質感は激しいものからキレイ目なものまで様々ですが、今日紹介するのはキレイ目なグランジテクスチャを集めた「30 Awesome Textures for Creating Subtle Grunge Designs」です。 psychosomatic texture 背景に敷いても、質感は与えながらも上に文字やイラストレーションを載せても邪魔しないそんなテクスチャが中心にまとめられています。いくつかのテクスチャが公開されていますが、今日はその中からいくつか気になったテクスチャをピックアップして紹介したいと思います

TOP  >  Design , vector  >  グランジを表現できるベクターデータ集「50 Stunning Free Grunge Vectors」 デザインの質感を出す上で汚れた表現というのグラフィックの表現の一つとして可使われますが、photoshopでテクスチャを使ってよりリアルに表現するまでもなくちょっとしたアクセントとして質感を出したい時に便利なのが今回紹介する「50 Stunning Free Grunge Vectors」です。 このエントリーではグランジを表現する時に役立つベクターデータセットが50収録されています。今日はその中から気になったベクターデータをいくつか紹介したいと思います。 詳しくは以下 ■50 Stunning Free Grunge Vectors よごれた壁を表現できるベクターデータセット ■50 Stunning Free Grunge Ve

cssを使った小技テクニックの エントリーが様々なブログで 公開されていますが、必要な時に 探すのが面倒なのでまとめます。 ソースコードを公開している記事に 絞ってまとめています。 CSSで実装する、ちょっと凝ったパンくずリスト cssでパンくずをデザインする方法とサンプル CSSで実装するちょっと凝ったパンくずリスト CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント ユーザービリティ（見易さ）を考慮したbodyに設定する。CSS HappyLifeさんも 記事を参考に別コードを公開。 CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント CSSだけでフレームを作るテクニック frameタグを使用しないで擬似フレームを作成。IE6対応。 CSSだけでフレームを作るテクニック テキストに影を付け印象的にする JSとｃｓｓでテキストに影を付けるテクニック

地域の小さなお店や経営者がWebサイトを使って集客を行う際に する事、Tipsを挙げてみます。あくまで一例ですが、Webサイトの 露出から集客（コンバージョン）に至る為の施行をリストにしてみました。 今日の記事はターゲットが地域依存性の高い業種にしています。 普段から良く書くSEOの記事ではなく、個人が行うブランディングのヒントです。 内容はかなり泥臭い方法になっていますので、クール且つスマートに仕事したいモテモテな貴方は今すぐ立ち去るがいい。 SEO効果は付加価値として付いてくるでしょう。 1・サイトマップ送信 xml形式のサイトマップをGoogleとYahoo!に送信し、より確実にクロールをして貰います。これはWebマスターの基本です。個人的にはxml-sitemaps.comが最も使いやすい印象です。sitemapの記述法に関してはGoogleのヘルプをご覧下さい。 いきなりブランデ

何かしらのサイトを組んでいる時って誰でも一度は思うんだろうけど、 「IEなんて・・・（自重」、「IEさえ・・・（自重」、「ちょ、IEおま・・・（自重」 とか、思うっすよね。 ボクも勿論その中の一人で、特にIE6に関しては常に思ったりしています。 IEのために今までどれだけの時間を費やしたか・・・と思えるほどに。 そんなIEさんですが、今日は逆にIEが有るから助かってるかもって思えるお話です。 ぇーまぁそんな訳で、明日からIEが一切なくなったとして。 「3番目のグローバルナビだけちょっと指定変えてもらえる？」 と、言われて、 『class追加するのやだなぁ』 ってのが、 「リンク先変わらないんだから属性セレクタ使えばいけるっしょ」 って言われてしまったり。 「そこの最初のh3だけmargin-topは0で、他のh3は30pxでお願い」 と、言われて、 『最初のh3だけclass追加しないとい

webデザインをどうやって磨いていったらいいかを、人から聞いたり考えたり調べたりしたものをまとめた。 デザインを見る力、判断力を養う 質の高いデザインを作るためには、デザインの質を判断することが重要 自分自身のデザインを客観的に判断できれば、デザイン力を高めることは可能 見る目を養うことが、デザイン力向上の第一歩 優れたデザインを紹介するサイトを見る 優れたデザインのサイトを見つけるには？ 優れたサイトを紹介するサイトを定期的に見に行ったり、RSSを購読する 優れたデザインに触れることで、自分自身に刺激を与えたり、デザイン面での流行を感じる 例 真似からはじめるウェブデザイン | DesignWalker イケサイ ウェブデザイナーのWEBデザインデータベース ike design Mk-II http://s-5.boy.jp/S5-Style/ コリス | サイト制作に関する最新の情報

TOP  >  WebService  >  だんだん小さくなるドット柄の背景パターンを制作してくれる「Dotted Background Generator」 WEBデザインの印象を決定付ける大きな一つの要素の一つに背景があります。様々な背景素材やジェネレーターがWEB上で公開されていますが、今日紹介するのはだんだん小さくなるドット柄の背景パターンを制作してくれる背景ジェネレーター「Dotted Background Generator」です。 上記のように上部から下部に向ってだんだんと小さくなっていくような背景を簡単に作る事ができます。 詳しくは以下 使い方は至って簡単でドットのカラーと、背景色、そして高さを指定すればOKです。色はカラースライダーなどは実装されていませんので、指定する必要があります。また選べるカラーはドット、背景ともに2色までとなっています。背景色は2色選んだ場合はA