ウェブ制作者のためのベストエントリ33【2010年7月版】
というわけで、しばらくまとめていなかったまとめ記事を再開し、私は元気ですとアピールしたい。 7月にあつめたブックマークのまとめです。 7月度必須ブクマベスト HTML5 Canvas Cheat Sheet 悩んだけど一応ベストへ。 HTML5 Canvas tagのチートシート。日常的に使うものでもないし、開発者向けになってしまうけど念のため。 OSを選ばないウェブデザイナーのための使えるウェブアプリ15*ホームページを作る人のネタ帳 7月に書いたけどついこの間のようだと思ったら、あんまり記事かいてないからそう思うんだきっと。 ついでにこちらも7月でした。 今日から現場で使えるjQueryのフォーム関連プラグイン15選 iPhone等のWebアプリをHTML5で構築する為のフレームワーク・Sencha Touchを触ってみた スマホアプリ開発者ならブクマしておきたい一品です。 Googl
PSDで学ぶWEBデザイン「Modern UI and Layout Tutorials for Photoshop」
TOP > Design , Photoshop , WebDesign > PSDで学ぶWEBデザイン「Modern UI and Layout Tutorials for Photoshop」 WEBデザインを制作される際に、photoshopを利用してデザインを制作するという方も多いと思いますが、今回紹介するのは成果物のPSDファイルとチュートリアルがセットになったエントリーをまとめた、PSDで学ぶWEBデザイン「Modern UI and Layout Tutorials for Photoshop」です。 Clean Web Layout with the 960 Grid チュートリアルだけではどうしても分かりにくかった部分が,完成後のPSDも併せてみることで、作り方や構造を直接学ぶことができます。今日は紹介されているものの中からいくつか気になったモノをピックアップして
国産のWebデザインギャラリーサイトが一番参考になるのでまとめた - かちびと.net
Webデザインのギャラリーは沢山 ありますが、結局感性の近い国産 のギャラリーが一番参考になるの でまとめました。探してみると結構 いろいろあるんですね。助かります。 やはりギャラリーは国産がいいですね。沢山あるので、ある程度厳選しています。 io3000 最近知りました。すごくいいですね、ここ。見やすいし、使いやすいです。おすすめ。 io3000 straightline bookmark とにかくクールでクオリティの高いサイトをブックマークしているギャラリー。 straightline bookmark Web Design Clip こちらも個人的にオススメのギャラリーサイトです。目的のデザインも直ぐに見つかりますよ。 Web Design Clip Good Design Web こちらは他ではあまり見かけない良デザインのサイトを紹介してる貴重なギャラリーです。 Good Desi
ケータイサイトのtableタグの特徴と、5つのデザイン例＆ソース : LINE Corporation ディレクターブログ
※文中のケータイ livedoorのPVに誤りがあり、修正いたしました (2010/9/22) こんにちは、『プチペット』を担当している吉沢です。 Webサービスのケータイ対応がやっと当たり前になってきたかと思ったら、今度はスマートフォンの対応と、モバイル業界の時の流れはものすごく速いですね。 そんな中、ケータイは新しい端末のシェアが増えていく度に、サイトで表現できる自由度が高くなり、単に作るだけではなく、デザインで差をつける時代が来ています。 それが読み取れる世の中の動きとして、たとえばモバイルデザインアーカイブさんは、年鑑が出るくらい書籍・サイト共に人気ですよね。また、ちょっと前に発売された書籍『ケータイサイト解体新書 デザインパターンから理解する実装テクニック』は、いろいろなデザインパターンからHTMLを引けるため、デザインをする上でとても参考になります。 携帯サイト年鑑2010 著
WEBサイトに使えるシームレスなパターン素材集「200+ Seamless Patterns Perfect for Website Backgrounds」
WEBサイトでの印象を決定づける一つの大きな要素の一つ背景。色ベタ、テクスチャを使ったものなどサイトによって様々な背景が制作されていますが、今回紹介するのはWEBサイトに使えるシームレスなパータン素材を集めた「200+ Seamless Patterns Perfect for Website Backgrounds」。 Photoshop Stripe patterns (20 patterns) 紙や布などといった定番のテクスチャを表現したものから、個性的な表現のパターンまで背景に使えそうなパターンセットがまとめられています。今日はその中から幾つか気になったものをピックアップして紹介したいと思います。 詳しくは以下 ■Seamless Paper Patterns (6 patterns) 方眼から、罫線まで様々なパターンの質感のある紙のパターンセット ■Woven Plaid Swa
配色に自信がなくても！Webデザインが好きになる配色ツールと使い方
2016年12月13日 Webデザイン, 便利ツール, 色彩 以前書いた記事「配色パターンからWebデザインを考える」を見た方から「いい配色だなーと思ってもうまく使いこなせない」という意見をいくつか頂きました。確かにすてきな配色をどうデザインに取り込んでいいのか、というのは難しいところです。今回は簡単に配色を提案してくれるオンラインツール「ウェブ配色ツール Ver2.0」を使って配色をWebデザインに取り込む方法を紹介します。 ↑私が10年以上利用している会計ソフト！ ウェブ配色ツールを使った基本的な配色方法 まずこの「ウェブ配色ツール Ver2.0」について。テーマカラーを一色選べば、それにあった配色を提案してくれる配色ツールです。Webサイトのプレビューを見ながら配色の調整ができるので、初心者さんにもおすすめです！ オレンジを元に色相差0°で配色した例。色相差を0°にすると同系色（＝同
無料ですさまじく使い勝手が良く参考にもなるPSDファイルのウェブデザインテンプレート10種類
ネット上には時として「こんな高品質なものが無料でよいのか？」というオドロキがありますが、まさに今回のPSDファイルはそれです。実際に使うのも良し、デザインの参考にするのも良し、非常に価値あるものとなっています。 ダウンロードは以下から。 10 Beautiful PSD Web Templates Of July 2010 For Free Download ◆その1：FreePSDTheme >> Free “Black Eve” PSD 以下の6種類で構成されています。 about.psd blog.psd contact.psd index.psd media.psd services.psd ◆その2：FreePSDTheme >> Free “PixelStudio” PSD themeforest_pixelstudio.psdが1つあり、その中に全部入っています。 ◆その3：
ウェブ配色ツール Ver2.0
基本的な使い方 左上のカラーピッカーを使って、任意の1色を作れば、それに合わせた配色が作れるツールです。またロゴの文字や色は任意の物を指定できるようになっています（ただしフォントは変更出来ません）。 カラーピッカーの下のスライダーを利用すれば、メイングラフィックの変更や色相幅も変えることが出来ます。動きが必要な配色の場合には、2つめのスライダーを右に動かしてください。補色配色に近い配色が出来上がります。 色の一覧を押すことで、出来上がった色の一覧を表示しますので、コピー&ペーストしてお使いください。 この配色ツールについて この配色ツールはフォルトゥナによって提供されています。リンク等は当然のことながら自由にしていただいて構いませんが、無断で複製・転載するのはおやめください。 取材・執筆等のお申し込み このツールに関してのご質問、あるいはその他の色に関する取材・業務や講演などは、フォルトゥ
中小企業のビジネスサイトに効果を与える5つのデザイントレンド
限られた予算と時間の中で、商品の販売、資料請求やダウンロードなどのビジネスサイトのゴールを達成するために効果的なデザイントレンドを紹介します。 5 Small Biz Web Design Trends to Watch 下記は各ポイントを意訳したものです。 はじめに 1. ミニマリスト 2. 独自の写真 3. 大胆なタイポグラフィ 4. アクションの呼びかけボタン 5. A/B テスト はじめに 中小企業のウェブサイトでは、ユーザーの注意を取り込みブラウジングをうながし、あなたのプロダクトあるいはサービスにおける利害関係を起こして、販売へと結びつける必要があります。 限られた時間と予算の中で、少しでも多くの可能性のあるユーザーに興味をもってもらうにはデザインは必須な要素です。 ここに中小企業のウェブサイトに大きな効果を与える5つのデザイントレンドがあります。 1. ミニマリスト Ambl
980pxで設計された素敵なサイトを紹介する -980px
980pxで設計された素敵なサイトを紹介している（、、、と思われる）「980px」を紹介します。 980pxの中からインスピレーションを得る、という意味でしょうか。
ウェブデザインの背景に大きな写真画像を使用する利点と注意点
最近のウェブデザインのトレンドの中でも人気の高い「背景に大きな写真画像を使用」する際の利点と注意点、ショーケースを紹介します。 インパクト 写真画像を背景に使用すると人の目を引き、非常に面白いものとなります。使用する写真画像が大きいほど効果があります。 1,000の言葉よりも ウェブサイトの要点を言葉で表現するよりも的確な写真画像で表現できたら、たくさんの言葉で言い尽くすよりも価値あるものになるでしょう。 世界観に浸る 背景に大きな画像を使用していると、まるでIMAXの映画のような感じがします。退屈なウェブサイトだけを見ているのではなく、素晴らしい景観を見ていることにも匹敵するものです。 背景に大きな写真画像を使用する注意点 上に挙げた利点はとても魅力的なものです。しかし、写真画像を背景に使用する際に考慮すべき注意点もあります。 気が散らないように 使用する写真が複雑なものだと、ユーザーの
ソース付きCSS3で作るボタン「10 Awesome CSS3 Buttons to use on your website」
次世代の規格として注目され、最新のブラウザでは問題なく認識ができるようになってきているCSS3。今日紹介するのはCSS3を利用してつくるボタン集「10 Awesome CSS3 Buttons to use on your website」を紹介したいと思います。 グラデーション、ドロップシャドウ、角丸など、CSS3の機能をふんだんに使って上記のような全部で10のボタンが公開されています。 詳しくは以下 ありがたいのが、見本のボタンのしたに、ソースコードがそのまま書かれており、細かい作り方まで見ることが出来ますし、CSS3で書かれているため、画像などは使っておらず、すぐに試すことができます。 デモも公開されていてデモは「10 Awesome CSS3 Buttons to use on your website」からご覧いただけます。また、ソースファイルはまとめてダウンロードすることもでき
非デザイナーのためのデザイン基本テクニック その１ | 07design.blog
デザイナーではない方も趣味でサイトを作っていたり、デザイナーに頼むほどでもない画像を作ったりする機会があると思います。デザイナーはセンスでサクサクと制作するイメージがあるかもしれませんが、実はデザインというものは数々のルールによって成立しています・・・デザイナーではない方も趣味でサイトを作っていたり、デザイナーに頼むほどでもない画像を作ったりする機会があると思います。 デザイナーはセンスでサクサクと制作するイメージがあるかもしれませんが、 実はデザインというものは数々のルールによって成立しています。 そのルールの知識があればデザイナーレベルとはいかないものの、見た目がきれいなグラフィックは作れるはずです。 デザインという言葉の定義やソフトの使い方から始めてしまうとややこしくなるので、 今回はあくまでも「とりあえず見た目をキレイにする」ということに重点を置いて説明します。 記事内で
コンプレックス配色をうまく使った、素敵なWebデザイン例 - かちびと.net
様々な配色の中でも個人的に 気に入っているのがコンプレッ クス配色という配色です。自然 の中ではあまり見られない配色 で都会的なイメージや見る人に 印象を与えるのに大きく貢献して くれます。 不調和ゆえのの調和配色と言われるコンプレックス配色を利用したWebデザイン例。個人的に必要になりそうなのでメモとして残します。コンプレックス配色に関しては以前記事にしましたので宜しければ合わせてご覧下さい。 The English Network グレーに、やや紫がかったレッドカラーが印象的です。統一感もあって見やすい。 The English Network globaltradeqatar こちらもレッド&グレーですが、先ほどのと雰囲気は随分違います。ロゴだけ合わせてないのは理由があるのかな・・ globaltradeqatar estoyvolando.com シンプルながらダークカラーにビビッ
黒ベースのクールなデザインいろいろ:phpspot開発日誌
Web Design: Dark Layouts | Abduzeedo | Graphic Design Inspiration and Photoshop Tutorials 黒ベースのクールなデザインいろいろまとまってるエントリのご紹介です。 どれもなかなか良くデザインされていて、参考になります。 黒ベースというのには代わりはないのですが、それぞれユニークなデザインになっていますね。 関連エントリ 黒ベースのクールなWEBサイトデザイン集 黒ベースのダークでクールなWEBデザイン集 シンプルデザインだけど見やすい黒ベースのWEBレイアウト集
ウェブページにモックアップ画像を重ねて表示できるオンラインサービス -maki
maki a free web design mock-up tool for pixel perfect layouts ウェブページに重ねて表示できる画像は上限5MBで、フォーマットはJPG, GIF, PNGです。 試しに、当サイトで試してみました。
ウェブレイアウトの過剰なボックスやボーダーを取り除くスタディ
ボックスやボーダーはウェブレイアウトでコンテンツを組み立てるためによく使用される便利なパーツです。 しかし手軽に使用すると、過剰になってしまうこともあります。そんな過剰になってしまったボックスやボーダーを取り除くスタディを紹介します。 A Mild Case Of Borderitis 下記は上記の記事を意訳したものです。 ウェブデザインにおいて、ボックスやボーダーはコンテンツを組み立てるためによく機能します。しかしながら、そのボックスやボーダーがある一点に過剰に集まってしまうことがあります。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
シンプルデザインのウェブページデザイン２５:phpspot開発日誌
自然をうまく取り入れたサイトデザイン２５:phpspot開発日誌
自然を取り入れた美しいWEBデザイン集:phpspot開発日誌