一流のサイトデザインを一から作成する手順集:phpspot開発日誌
The 60 Best Photoshop Tutorials to Design Your Own Amazing Site | 一流のサイトデザインを一から作成する手順集。 次のようなクールなサイトデザインをPhotoshopで作っていくチュートリアル集が公開されています。 Photographer Portfolio layout Unique Grungy Website Layout Game Layout with Scratched Menu Wedding Layout Simple Business Style Agency Layout 全部見る 参考に作ればデザインの苦手な人でもそこそこのページが出来そうですね。
ウノウラボ Unoh Labs: CSSを書くときに使っているツールの紹介
yamaokaです。 今回は、ぼくが普段CSSを書くときに使っているツールを紹介します。 Firebug 入手先: Firebug :: Firefox Add-ons Firebug posted by (C)フォト蔵 もはやJavaScriptの開発には欠かせなくなった感のあるFirebugですが、CSSを書くのにも使えます。 ボックス要素を調査（inspect）、CSSを書き換えてレイアウトを考える参考にしたり、 HTMLを書き換えてid属性やclass属性を書き換えて適用するスタイルを変更した場合の変化を試してみたりします。 IE Develper Toolbar 入手先: Download details: Internet Explorer Developer Toolbar IE Developer Toolbar posted by (C)フォト蔵 前述のFirebugと同
黄金比をサイトのデザインに取り入れる簡単な３つの方法 | コリス
その調和された比率は、トランプカードなどの日常的なものから、ギリシアのパルテノン神殿、ミロのヴィーナス、モナリザなどの芸術分野まで、多数存在します。 黄金比を使ったデザイン テクニックついては、下記も参考にどうぞ。 黄金比とは、黄金比を使ったすごいデザインテクニックのまとめ -Webデザイン・紙デザインに 黄金比を矩形に使用する 黄金比をマージンに使用する 黄金比をパーツに使用する 黄金比を矩形に使用する サイトで使用する画像などの矩形に黄金比を適応します。 サンプルでは、144pxと233pxの組み合わせを使用していますが、「1:1.6」を利用して100pxと160pxなど簡易なものでも効果はあると思います。 黄金比を横長の矩形に使用 黄金比をマージンに使用する レイアウトにグリッドシステムを取り入れマージンを使用した場合、数種類のサイズが必要になる場合が多くあります。 その際、１つの値
Java におけるコード進化パターン (Code Evolution Patterns in Java)
Java におけるコード進化パターン (Code Evolution Patterns in Java) asato shimotaki <asatohan at gmail.com> 最終更新日 : 2009/6/21 (2004/4/22 より) [...] For twenty years, I spent two or three hours a day looking at pairs of things -- buildings, tiles, stones, windows, carpets, figures, carvings of flowers, paths, seats, funiture, streets, paintings, fountains, doorways, arches, friezes -- comparing them, and asking my
webサービスを作る前に読みたいデザイン系エントリまとめ - 遥か彼方の彼方から
まとめwebプログラムをしていて、いざサービスを作ろうと思ったときにネックになるのが、デザインです。 僕はもうその手のセンスが絶望的に欠けていて、配色もレイアウトもまともなものが出来ません。HTMLやCSSそのものの知識があっても、それで作るモノが見えてこない。CakePHPの勉強をしてwebサービスをいっぱい作ろうと思っているのに、これは良くない。 そこで実際にwebサービスを作る前に読んでおきたいwebデザイン系の記事をメモとして並べておくことにしました。「これを読んでおけ」「ここのデザインは参考になるよ」「このアイコン集おすすめ」「あのツールの使い方ならここだ」「このツール良い感じ」みたいなものがあれば、是非教えてください！ 随時追加していきます。 プログラマでも出来るWebデザイン - Blog.37to.netウノウラボ Unoh Labs: デザインセンスの無い人がwebサイト
デザインセンスを刺激するインスピレーションサイト10選
デザインセンスを刺激して、インスピレーションを与えるサイトの10選です。 Pattern Tap ボタンや背景・線などエレメントごとのデザイン集 StyleCrunch クールなデザインでスタンダード
萌え理論Blog - キャラデザにおける髪の法則
構造主義的なキャラクターデザイン論をしてみよう。 キャラデザにおける髪は、主人公の内面を意味する。 髪の量≒自意識の量 一般に、髪の量は、自意識の量に比例する。*1 アニメキャラだけではなく、現実でもそうだ。 坊主は文字通り坊主だが、悟りを求め無我の境地を目指すことを表す。 軍隊や高校球児の丸坊主も、我を捨てることを要求されて、短くなる。 坊主＜軍隊＜高校球児＜サラリーマン＜不良＜アーティスト 一般的にはこんな感じか。組織に強く帰属している者ほど髪が短い。 ふつう男より女が長いのも、女は組織ではなく家庭に属するからだ。 また侍より浪人の方が長いし、失恋は二人の世界の崩壊なので髪を切る。 またダウンタウンの松本人志が丸坊主になると、求道的な色が強まった。 リーゼントは文字通りに「突っ張っている」し、モヒカンもそうだろう。 あずまんが大王における髪 さて、アニメに当てはめてみよう。まず、あずま
SpoonGraphics
This post was originally published in 2008 The tips and techniques explained may be outdated. Starting with the design application of Adobe Illustrator create a group of vector based geometric lines at dynamic 45 degree angles, then follow the walkthrough to rough them up with brush textures in Adobe Photoshop resulting in a cool and trendy design style. The use of angled lines adds a dynamic flai
訴求効果のある「打ち出しエリア」のレイアウトパターン集
サイトのトップページに配置する、訴求効果が最も高い「打ち出しエリア」のレイアウトのパターン集の紹介です。 Carousels Design Showcase 「Carousels Design Showcase」は、当サイトで度々紹介している「Elements of Design」の新カテゴリです。 Carouselsには現在50個登録されており、他にもウェブサイトでよく使うエレメントのデザインが収集されています。 フッタのデザイン集 フォームのログインのデザイン集 検索フォームのデザイン集 見出しのデザイン集 コメントの入力欄のデザイン集 コメントのデザイン集 カレンダーのデザイン集 コード表示のデザイン集 動画プレイヤーのデザイン集 アイコンのデザイン集 引用箇所のデザイン集 登録フォームのデザイン集 「打ち出しエリア」と記載しましたが、Googleで調べてみたら、あまり使用されない言
「はてなダイアリーに女性向けのかわいいデザインが無い」とか言われるけど、公開デザイン+テーマ1268個を全部チェックしたオレが全力でかわいいデザインを薦めるよ - 聴く耳を持たない(
先日のメールマガジン週刊はてなで ♪れいこん(id:reikon)のはてなピックアップ その169♪ 「女性向けのデザインが少ない！」「もっとお洒落にブログを飾りたい！」 はてなダイアリーのデザインについて、しばしばそんなご意見をいただきます。 どうやらトップページをはじめとするサイト全体の色合いがブルーが多く、 ちょっとコンサバなデザインであることも手伝って、女性の方は物足りない、 と思われることが多いみたいです。 週刊はてな バックナンバー と書かれていましたが、「はてなダイアリーには女性向けのデザインが少ない」とか、または「かわいいデザインが無い」という意見をよく見ることがあります。 しかし！ でも、でも・・それは大きな誤解です！ 週刊はてな バックナンバー と id:reikonさんも仰っているように、あんまり目に付かなかったり探し難かったりするかもかもしれませんが、はてなダイアリ
Index of /article/2007-more-web-design-trends-and-cliches
Apache/2.4.29 (Ubuntu) Server at modernlifeisrubbish.co.uk Port 443
ぼくがCSSを書くときに手放せないツール - ぼくはまちちゃん！(Hatena)
こんにちはこんにちは！！ CSS書いてますか！！ ぼくなんか書きすぎて border: 1px solid red; が0.5秒で打ち込めそうな感じなんです＞＜ ところで、CSSいっぱい書いてると、ぱっと見ただけでおよそ何ピクセルか、 わかったりするようになるから人間ってすごいよね！ この余白は 6px だな、こっちのblockは 40px くらいかな？ とか…！ 大きいのは難しいけど！ 最近はエラスチックなんとかレイアウト？っていう em で指定しちゃうのが流行だそうだから pxはあまり使わないのかもしれないけどね！ ところで、そんなぼくがCSSを書くときに必須なツールがあります！ 紹介しちゃいますね！ きっと手放せなくなっちゃうよ！ ひとつが、カラーピッカーだね！ 画面上の好きな色を拾うやつ！ これは色々なものが公開されているから省略しますね！ ぼくはこれつかってるけど！ もうひとつ…
モバゲーのような携帯サイトを作るための12のTips 携帯ホームページを作ろう！ -ちょっと詳しいモバイルサイトの作り方-
当ブログが携帯サイト作成法に関する記事をかいていることから、読者の方から、 『モバゲーのような携帯サイトを作るためにはどうしたらいいんですか？』 っていう質問を最近良く受けます。 おそらく、モバゲーがとても有名で、ある種モバゲーが携帯サイト界のデファクトスタンダードのような 位置づけになってきているのでしょうか。 確かに、携帯サイトを作ってきている身としても、 モバゲーのサイトデザインにするには、結構難しいことも多いし、学ぶことも多い。しかし、最近の携帯サイトは、実機からしかアクセスできないようになっていて、PCからコードを覗くことができないことも多く、学ぶことも難しいようです。 ということで、今回は実際にモバゲータウンに携帯でアクセスして、携帯の画面を見ながら、デザインを真似て新しく自分なりに作ってみましたので、そこから得た経験をTipsとして公開したいと思います。 ちなみに、左のスクリ
Web2.0系サービスのロゴに使われているフォントがわかる『The Logos of Web 2.0』 – creamu
かっこいいロゴをデザインしたい。 そんなあなたにおすすめなのが、『The Logos of Web 2.0』。Web2.0系サービスのロゴに使われているフォントがわかるサイトだ。 このサイトでは、Web2.0系サービスのロゴに使われているフォントが多数紹介されている。 リンク先ではフォントを購入することが可能だ。 ロゴをデザインするときにとても参考になるのではないだろうか。 Web2.0系サービスのロゴに使われているフォントがわかるサイト、チェックしてロゴデザインの参考にしたいですね。 またIKEAに行ってきました。部屋の仕切りに使えるオープンタイプのシェルフと2mくらいの本棚を購入。いい感じ。送料が5000円くらいかかるんだけど、商品が安いからいいかな。 あと昨日ランチに食べた究極の親子丼。ばりうまです。お店の雰囲気もとてもいい。 » ひない小町
ECサイトの画面設計--男と女、買い物の行動パターンはどう違う？:マーケティング - CNET Japan
便利さ、手軽さから、オンラインショッピングは今や私たちの生活の中に深く浸透しています。そして「売れるオンラインショップ」を目指して、各Eコマース（EC）サイトが凌ぎを削っています。ECサイトの構築にあたって、まずはそのショップのターゲットを設定し、それぞれの攻略方法を考えることが大切です。攻略方法を考えるには、ターゲットユーザーのサイト内行動を知る必要があります。 ここで1つの疑問が浮かびます。はたして、男性と女性で、ECサイト内の行動に違いはあるものなのでしょうか。 「楽天市場でギフトを買ってください」 今回のアイトラッキング分析では、「ECサイトにおいて男女の行動に違いはあるのか」を検証すべく、以下のテストを行いました。対象サイトは、日本最大のECサイト、楽天市場としました。 対象サイト：楽天市場 被験者：オンラインショッピング経験のある20代〜30代男女、各3名 タスク：バレンタイン
ページの幅960pxを基準にして、設計するグリッドデザイン | コリス
960 Grid Systemは、ページの幅960pxを基準にして、設計するグリッドデザインを紹介しているサイトです。 960 Grid System デモページ 960pxを基準にする理由としては、下記の2つが挙げられています。 最近のモニターは1024x768の解像度をサポートしており、960pxを表示するには十分である。 960という数字は、2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480と多くの数字で区切ることができ、フレキシブルにグリッドの設計を行える。 デモページでは、左右に10pxのマージンを持ち、カラム間のマージンを20pxにし、60pxをベースに12カラムと、40pxをベースに16カラムの2種類のレイアウトを見ることが
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://www.designwalker.com/2008/08/logo-process.html
http://moe.matrix.jp/design/index.html
アイデア満載のクールなデザインのウェブサイト集 -2008年7月 | コリス
Web Color List