タグ DesignWalker
人気順 5 users 10 users 50 users 100 users 1000 usersウェブデザインに使えるチャート・グラフツールいろいろ | DesignWalker
企業サイトでは売上の推移や販売シェアなどグラフやチャートなどを使って分かりやすく表示したいといったニーズは結構あります。 エクセルで作成したグラフを貼り付けたりするのも可能ですが…。 今回は、JavaScriptやFlashなどを使って比較的、簡単にグラフやチャートを生成できるツールをいろいろまとめてみました。 Open Flash Chart Flashをベースにしたオープンソースのチャートです... 続きを読む
HTML5で構築されたテンプレート・フレームワークいろいろ | DesignWalker
現在、徐々に各ブラウザの対応が進められているHTML5。動画やオーディオ再生、アニメーションなどの要素が実装されていて、iPhoneやiPadがこのままFlashを採用しないままなのであれば、今後、HTML5が普及してしまえば、Flashは必要なくなる!?なんて意見もあるほどです。 ウェブデザインに関わる方々は、今のうちからちょっとした概要だけでも見ておいて損は無いのではないでしょうか。 というわ... 続きを読む
フォームの見栄え・使い勝手を強化するjQueryプラグインいっぱい | DesignWalker
お問い合わせやユーザー登録、ログインから商品の注文まで、ウェブでとっても重要なフォーム要素。 このフォームの使い勝手や見栄えはそのサイトの売上や登録に大きく影響するといっても過言ではありません。 フォームの入力項目が多すぎたり、わかりづらかったりすると、せっかく購入やユーザー登録する気になってくれているユーザーの方々も逃げてしまいますよね…。 今回は、フォームのデザインや使い勝手を強化してくれるj... 続きを読む
ここまでできる!CSS3を使ったチュートリアルまとめ | DesignWalker
ここ数年でたくさんの情報が揃ってきたCSS3。古いブラウザでは対応されていないため、まだまだ一般に普及するまでは時間がかかってしまうのかもしれませんが…。 CSS3を使えば、ウェブデザインの可能性をさらに広げてくれることは間違いありません。 デザイナーの皆さんは、是非CSS3でどんなことができるの?って事だけでも今のうちから知っておいても損はないと思いますよ。 今回は、そんなCSS3を使えばここま... 続きを読む
グリッドデザインに使えるツールいろいろ | DesignWalker
ウェブサイトをデザインする際、レイアウトはどのようにおこなっていますか? ガイドにあわせて、要素を配置できるグリッドを使用すると、レイアウトがワンランクアップしますよ! 今回は、そんなグリッドデザインに使えるツールをいろいろご紹介します。 Grid Style In Modern Web Design: Showcase and Resources 美しいグリッドデザインのサイトがたくさん集められ... 続きを読む
ワイヤーフレームに使える素材いろいろ | DesignWalker
以前、このブログでご紹介した「ウェブサイトの設計図 ワイヤーフレームを活用しよう」 ウェブサイトをデザインする前に、用意すると、とっても便利なワイヤーフレーム。 ページの各要素をレイアウトして、デザイン制作をスムーズに行うことが出来ます。 今回は、そんなワイヤーフレームに使える素材をいろいろとまとめてみました。 Design Stencils – Design Pattern Library – ... 続きを読む
ウェブデザイナーにおすすめ Google Chromeエクステンションいろいろ | DesignWalker
最近では、Google Chromeを標準のブラウザとして利用されている方々も多いのではないでしょうか。 表示もサクサクで自分好みに拡張できるエクステンションもだんだんと充実してきました。 今回は、ウェブデザイナーやデベロッパーの方々におすすめのGoogle Chromeのエクステンションをまとめてみました。 Web Developer FirefoxでもおなじみのWeb DeveloperのCh... 続きを読む
無料で使えるWordPressテーマ 2009年 厳選100+ | DesignWalker
え!?こんなにレベルの高いテーマが無料で使えるの!?と思ってしまうほど、年々レベルが上がっていく無料で使えるWordPressテーマ。 2009年、総まとめシリーズです。今回は無料で使えるWordPressのテーマを100種類とおもったら、少し多めに集めてしまいました。 ダウンロードしてそのまま使用するだけでなく、デザインのアイデアやコーディングの参考などにも使えそうですね。 Imaginatio... 続きを読む
ビジネスサイトに使えるレイアウトのチュートリアルいっぱい | DesignWalker
最近では、ウェブサイトのデザインもどんどん複雑になっていて、初心者の方々がデザインを真似しようと思ってもなかなか難しい物が多くなってきましたね。 これから、ウェブデザインを勉強しようと思っている方々などは、基本的なビジネス系のウェブサイトの真似からはじめてみてはいかがでしょうか? 今回は、そんなウェブデザイン初心者の方でも、つかえそうなビジネスサイトのレイアウト系のチュートリアルをいっぱい集めてみ... 続きを読む
ダウンロードして使えるボタン素材いろいろ | DesignWalker
ウェブサイトでもっとも重要なデザイン要素といっても過言ではないボタン。 このボタンのデザインが良くないと、ユーザーにクリックしてもらえなくなっています。 今回は、Photoshopファイルなどで、ダウンロードして使えるボタン素材をいろいろと集めてみました。 WEB UI Treasure Chest v 1.0 ボタンやバッジ、ラベルなどの詰め合わせセット。どれもとってもきれいに作られていますよ!... 続きを読む
デザイナーのためのHTML5リソースまとめ | DesignWalker
2010年には、正式な勧告としてリリースされる予定のHTML5。 徐々にブラウザの対応も進んでいて、すでに、多くのデザイナーたちは、この次世代HTMLを使って、様々な活動を始めています。 だんだんとHTML5のリソースも増えてきたので、今回はHTML5についてまとめてみました。 まずは、HTML5を使ってどういう事ができるのか?実際に見る事ができるサイトをいくつかご紹介。 HTML5 Galler... 続きを読む
テーブルに実装できるjQueryプラグインいろいろ | DesignWalker
スペックやデータ、料金表などを表示するためには、テーブルコーディングは欠かせませんね。 テーブルにjQueryのプラグインを実装すると、ソートやページングなどなど、様々な機能を追加する事ができます。 今回は、テーブルに実装できるjQueryプラグインいろいろとまとめてみました。 Flexigrid – Web 2.0 Javscript Grid for jQuery カラムのリサイズやソート、ペ... 続きを読む
ショッピングサイトをデザインする際に使えるサイトまとめ | DesignWalker
ショッピングサイトは扱っている商品やマーケティングはもちろんですが、デザインやインターフェースの使い勝手なども、売り上げにつながる大きな要素なのでは無いでしょうか? カートの使いやすさ、商品の見やすさなど、デザイン部分で改善できる部分もたくさんありそうです。 今回は、ショッピングサイトをデザインする際に参考にできそうな使えるサイトをいろいろとまとめてみました。 35 Inspirational S... 続きを読む
ウェブデザインのユーザーインターフェースに使えるサイトまとめ | DesignWalker
誰にでも簡単に使いやすいユーザーインターフェイスをデザインする事はウェブデザインにおいてとても重要な要素となります。 とは言っても、誰もが直感的に使いこなせるユーザーインターフェイスをデザインする事はなかなか簡単なことではありません…。 今回は、優れたウェブデザインのユーザーインターフェイスを作り出すために、参考になりそうなサンプルサイトをいろいろとまとめてみました。 User Interface... 続きを読む
マウスオーバーをデザインする | DesignWalker
ウェブデザインには欠かせないリンク要素。 メニューやボタン、画像、テキストのリンクなどちょっとした工夫で、ユーザーがリンクをマウスオーバーしたときに小さな驚きと楽しみを与えられるのではないでしょうか? 今回は、そんなマウスオーバーをデザインするアイデアをいくつかまとめてみました。 Realistic Hover Effect With jQuery — Adrian Pelletier マウスオー... 続きを読む
photoshopでゼロから作るウェブデザイン チュートリアル30選 | DesignWalker
かっこいいウェブサイトをデザインしたいけど、そもそもどうやってデザインしているのかわからないという初心者の方々もたくさんいらっしゃるのではないでしょうか? 今回はそんな方々にとっても便利なゼロからきれいなウェブサイトを作るPhotoshopのチュートリアルをまとめてみました。 中級、上級者の方々でもデザインの幅を広げる意味でもとっても参考になりそうなチュートリアルばかりです。 Create a M... 続きを読む
Google Analyitcsをもっと便利に | DesignWalker
みなさんGoogle Analyitcsでアクセス解析をされている方が多いのではないでしょうか? 無料で使えて、高機能なGoogle Analyticsは、先日APIも正式に公開され、今後様々なツールが公開されていく事だと思います。 そのままでも、十分いろいろな解析ができて便利なツールなのですが、今回はGoogle Analyticsをさらに便利に使えるツールや設定方法、コードなどをご紹介します。... 続きを読む
ソースがダウンロードできるFlashエフェクト集 | DesignWalker
ちょっとしたFlashエフェクトにセンスを感じる事はありませんか? 光の微妙な加減や、ちょっとしたスムーズ動きで自然に見せるFlashは、見ているだけでも楽しめますね。 たまには、このFlashどうやって作ってるんだろう??って思うほどすごいものもちらほらあります。 今回は、そんなイライラも解消できるように、ソースもダウンロードできるハイクオリティなFlashエフェクトをいろいろとまとめてみました... 続きを読む
無料で使えるアイコンサイトいろいろ | DesignWalker
無料で使えるアイコンはいくつあっても困りませんね。 クオリティのかなり高いアイコンが無料で公開されているアイコンサイトが大量にありますね。 今回はそんな使えるアイコンサイトをまとめてみました。 Iconfinder | Icon search made easy おなじみアイコンサーチIconfinder Icon Seeker キーワードとサイズで絞り込めるアイコン検索 Very Icon 20... 続きを読む
Illustratorでつくるテキストエフェクト集 | DesignWalker
ロゴやタイトルなどにそのまま使えるテキストエフェクトのチュートリアルは、このブログでも大人気です。 以前は、『Photoshopチュートリアル テキストエフェクトいっぱい』、『Photoshopチュートリアル テキストエフェクト パート2』とPhotoshop編をお送りしました。 今回は、Illustrator編をお送りします。 Creating an Environmentally Friend... 続きを読む
ウェブサイトの設計図 ワイヤーフレームを活用しよう | DesignWalker
ウェブサイトを構築する際にワイヤーフレーム(骨組み)からしっかり作り込んでおくとデザインの作業もスムーズに進めることができます。 また、クライアントに提示するプレゼンテーションとしても利用できるので、ワイヤーフレームを作って、要素の抜けや動作の矛盾などをなるべく最小限にすることができるのではないでしょうか。 今回は、ウェブサイトの設計図とも言える、ワイヤーフレームについていろいろとまとめてみました... 続きを読む
髪の毛切り抜き / Photoshopを使って背景をきれいに切り抜く方法まとめ | DesignWalker
Photoshopを使いはじめてだんだん楽しさがわかってくるのは背景をきれいに切り抜くことができるようになってからではないでしょうか。 切り抜きが素早くできれば作業効率もアップしますし、きれいに切り抜ければ最後の仕上がりもとても美しくなります。 今回は、そんなPhotoshopの基本といっても良いかもしれない、背景をきれいに切り抜ぬく方法をまとめてみました。 動画チュートリアル 動画のチュートリア... 続きを読む
フォームをデザインしよう | DesignWalker
お問い合わせやログイン、アンケートなどなど、ウェブデザインには欠かせないフォーム。 今回は、そんなフォームをデザインする方法をいくつかまとめてご紹介します。 JavaScriptやCSSを使えば結構いろいろなことができそうです。 FancyForm mootoolを使ってチェックボックスとラジオボタンををクールなデザインに変えてしまうことができます。 CRIR: Checkbox & Radio ... 続きを読む
商用利用可能なベクター素材いろいろ | DesignWalker
先日、人気を集めていたQbrushesさんのエントリー『40+ Free Vector Graphics and Photoshop Brushes For Commercial Use』 40+ Free Vector Graphics and Photoshop Brushes For Commercial Use 商用利用も可能な、ベクター素材とPhotoshopのブラシをまとめられていまし... 続きを読む
クリック一回でプロの仕上がりPhotoshopアクションファイルいろいろ | DesignWalker
Photoshopのアクションファイルは、ブラシ同様に多くのクリエイターが無料で配布している、Photoshopで読み込み可能なファイルです。 アクションファイルは、あらかじめPhotoshopの作業工程が記憶されているファイルで、その作業工程を自動で再現してくれる、とっても便利な機能です。 プロの技を保存したアクションファイルを手に入れると、クリック一回でプロの作業工程を再現してくれるのです。 ... 続きを読む