webサービスを作る前に読みたいデザイン系エントリまとめ - 遥か彼方の彼方から
まとめwebプログラムをしていて、いざサービスを作ろうと思ったときにネックになるのが、デザインです。 僕はもうその手のセンスが絶望的に欠けていて、配色もレイアウトもまともなものが出来ません。HTMLやCSSそのものの知識があっても、それで作るモノが見えてこない。CakePHPの勉強をしてwebサービスをいっぱい作ろうと思っているのに、これは良くない。 そこで実際にwebサービスを作る前に読んでおきたいwebデザイン系の記事をメモとして並べておくことにしました。「これを読んでおけ」「ここのデザインは参考になるよ」「このアイコン集おすすめ」「あのツールの使い方ならここだ」「このツール良い感じ」みたいなものがあれば、是非教えてください！ 随時追加していきます。 プログラマでも出来るWebデザイン - Blog.37to.netウノウラボ Unoh Labs: デザインセンスの無い人がwebサイト
MdN Design｜総合情報サイト
デザインする グラフィックアプリの使い方から、デザインの基礎、最新の表現手法まで、デザイナー、イラストレーター、写真家が知りたい情報が満載！
連載：独学で極める “Webデザイン”の技と心｜gihyo.jp … 技術評論社
運営元のロゴ Copyright © 2007-2024 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。
第9回 より見てもらえるようにユーザーを“そそる”、ワンランク上の画面構成のコツ | Web担当者Forum
第9回 より見てもらえるようにユーザーを“そそる”、ワンランク上の画面構成のコツ 現実の店舗や窓口では、目の前にいるお客が困っていればすぐにわかるし、同じトラブルが重なれば問題が起きないように施策をとる。しかし、ウェブサイトを作っているときにはお客は目の前にいないし、公開後にお客の対応をするのはウェブサーバーやスクリプトという機械だ。そのため、現実の商売では当然のように行っている接客ができない、いや忘れてしまってはいないだろうか？ 今木 智隆（株式会社ビービット） 限られた画面内でユーザーの目線を 効果的に誘導するテクニックを紹介「ファーストビュー」、すなわち「ユーザーがサイトを訪問したその瞬間に画面に表示される領域」は、画面設計・デザインにおいて、常に意識しなければならないポイントの1つだ。限られたスペースの中で、いかにコンテンツに優先度を付け、効果的に構成するか、かなり悩まれた経験のあ
GT Nitro: カーレーシング・ドラッグレーシングゲーム - Google Play のアプリ
GT Nitro: Car Game Drag Raceは、典型的なカーゲームではありません。これはスピード、パワー、スキル全開のカーレースゲームです。ブレーキは忘れて、これはドラッグレース、ベイビー！古典的なクラシックから未来的なビーストまで、最もクールで速い車とカーレースできます。スティックシフトをマスターし、ニトロを賢く使って競争を打ち破る必要があります。このカーレースゲームはそのリアルな物理学と素晴らしいグラフィックスであなたの心を爆発させます。これまでプレイしたことのないようなものです。 GT Nitroは、リフレックスとタイミングを試すカーレースゲームです。正しい瞬間にギアをシフトし、ガスを思い切り踏む必要があります。また、大物たちと競いつつ、車のチューニングとアップグレードも行わなければなりません。世界中で最高のドライバーと車とカーレースに挑むことになり、ドラッグレースの王冠
素人が撮影した写真を、10秒でイケてる写真にする方法 : LINE Corporation ディレクターブログ
こんにちは、佐々木です。 予算やスケジュールに余裕のある案件であれば、プロのカメラマンやデザイナーをアサインするのが一般的ですが、ちょっとした案件であればディレクターが写真の撮影や編集を行うことがあります。しかし普段専門でやっていない、いわゆる素人が撮影した写真は「そのまま使うにはちょっと…」というクオリティであることがほとんどです。 そこで今回は、Photoshopの「色調補正」機能を使って、誰でも簡単に「素人が撮影した写真を10秒でイケてる写真にする方法」をご紹介します。 ※写真の補正を本格的にやろうとする方には参考になりません。あくまで、簡易的な方法にすぎませんので、その点もあらかじめご承知おきください。 今回使用したソフトは、かなり昔の『Photoshop 6』ですので、最新バージョンと食い違う部分も出てくるかと思います。そのあたりは適宜読み替えて該当する機能をお探しください。 ぼ
ウノウラボ Unoh Labs: 「視線を導く」方法あれこれ
yamazakiです。毎度毎度技術系なこのウノウラボには馴染まない話題を振りまいているわけですが、さてはてどの程度お役に立てているものか…。 今回のテーマは「視線」です。例えばWebサイトは「見てもらう」ことが大事ですし、また、UI設計の場面などでも、「視線をうまく導いてやる」のは使い勝手をよくする上でも大切なことだと思います。といったわけで、ユーザの視線をうまく捕まえてみたり導いてみたりする上で役に立つかもしれない情報を簡単にまとめてみます。 １．視線をつかまえる Web上にも街にも広告だの何だのと情報が氾濫しています。その中で「見てもらう」ためには何かしらの工夫が必要になることがあります。というわけでまずは「人の視線をつかまえる」ための方法論を少し。 「人の顔」を使う まずはこの画像を見てみてください。 01 posted by (C)フォト蔵 最初に、どれを「見てしまいました」か？
ウノウラボ Unoh Labs: グラフィック作りのコツとカン
こんにちは。yamazakiです。 前回はレイアウトなどについて非常にざっくりとですが書いてみたわけですが、いかがでしたでしょうか。 そろそろ「グラフィック」のほうも少し書いてみようかという気になってきたので、グラフィック品質を高めるベーシックな技術についても少しずつ書いていってみようと思います。 基本のき 具体的な話に入る前に、まずは基本的な話から。 とりあえず、ざっとあなたの周囲を見回してみてください。壁にしても、PCにしても、「単なる一色のベタ塗り」にはなっていないのではないかと思います。光の加減などで、「影」や「グラデーション」がついていると思います。また、ものの表面には「つるつる」「ざらざら」といった「質感」があるのが当たり前、という中で私たちは生活しています。 そのため、人の目はそういう「グラデーション」や「影」、「質感」がある状況を「見慣れて」います。 グラフィック上
ウノウラボ Unoh Labs: buttonタグでサブミットするあれこれ
CSSでいつも悩まされるのはクロスブラウザですけど、フォームでは特に面倒くさい要素が山盛りですよね。ボタンの文言を動的に変えたいから画像はなるべく使いたくないけど、だからといってブラウザのデフォルトのボタンとか、味気ないですものね。 今日は、フォームにつきもののボタンについて考えてみます。 私たちがボタンに求めるモノって、何でしょう。 データを送信（submit）する どのブラウザでも同じように見える 使い回しが聞く ボタンについている文言がどんなに長くなっても、水平方向の長さがフレキシブル 上記のようにサイズ的にフレキシブルであっても、見た目の美しさを阻害しない ボタンの大きさ＝クリックできるエリアの大きさ 画像がdiableされていても使用可 CSSがdisableされていても使用可 ボタンのように見えて実はただのリンクの時のもある これらの要求を解決してくれる方法が複数出
企画屋さんは自分の仕事はデザインだと認識したほうがいいんだと思うよ：DESIGN IT! w-LOVE
不確実な時代をクネクネ蛇行しながら道を切りひらく非線形型ブログ。人間の思考の形の変遷を探求することをライフワークに。 いわゆる典型的な企画屋さんの仕事ってほんとに手におえないなって、最近つくづく感じます。 僕自身、どちらかというと企画を担当する仕事をしてますけど、そんな僕からみても、いわゆる企画屋さんの仕事って傍からみてても「おいおい、それじゃあ、いつまで経っても形にならないよ」ってくらい、実装のことを無視した仕事の進め方をしてたりします。 制約を知らない人たちそれでいて、そういう人たちに限って「自分はものづくりにかかわってる」みたいな顔したり「ユーザー視点がどうこう」とか言ったりします。客観的にみると、ぜんぜん、ものづくりの視点が欠けてるし、ユーザー視点のかけらもなくて単にあなたの思いつきを並べてるだけですよね、と思うことが多いんですけど。 とにかくアイデアベースだけなので、ものづくりが
ウノウラボ Unoh Labs: 「名刺作り」で学ぶレイアウト（＋α）基礎講座
こんにちは。yamazakiです。 4月に入社してはや3ヶ月目。同じように4月に入った方などは、仕事にも少しずつ慣れてきて、そろそろ少しずつ外に目を向ける余裕も出てくる頃でしょうか。 たとえば社外のイベントや勉強会などに参加する、となれば必携の「名刺」。 会社から支給される場合がほどんどだとは思いますが、中には自分でオリジナルの名刺を作って配る、なんていう人もいるかもしれませんね。 今回は「名刺のデザイン」をネタに、「レイアウト」の基本的なあれこれを解説してみたいと思います。 名刺といえば大抵の場合、以下のような内容を載せますね。 名前 肩書き メールアドレス 携帯電話番号 会社の電話番号、Fax番号 会社名 会社の住所 これ以外にも会社によって色々あるかと思いますが、ひとまず今回はこれだけの要素で作ってみることにします。 また、使うフォントは、（MS ゴシックは印刷向けには
覚えておきたい配色のワザと便利なツール :: Love & Design ::
Webデザインや配色に役立つ（かもしれない）テクニック、便利なツールを紹介しています。 /*無駄にエロいのは仕様です*/ 01 About 02 Blog 03 Color 04 Design 05 Love 06 etc 色の3つの要素 配色を行う前に、色に関する基礎知識をおさらい。色は「色相・彩度・明度」の3つの要素によって成り立っています。明度だけの性質を持つ無彩色に対し、有彩色は色相、彩度、明度の3つの性質を持っています。これを「色の3属性」と呼びます。 色相（しきそう：Hue） 色相とは、赤・橙・黄・緑・青・紫などの色みのこと。 （色相はつながりあって色相環という輪になります。） 彩度（さいど：Saturation：Chroma） 色の鮮やかさ、強弱の度合いのこと。 彩度が高い（鮮やか）⇔彩度が低い（鈍い） 明度（めいど：Value：Brightness） 色の明るさの度合いのこ
ウノウラボ Unoh Labs: 色選びのコツ
こんにちは！ yamazakiです。 高度なプログラミング話だらけのこのブログには全く馴染まない話題でアレですが、今回は「色」について書いてみようと思います。 Webサイトを作っているとき、ちょっとした書類を作るとき、「どんな色を使おうかなぁ」というのは毎度結構迷うところです。今回はそんなときにもしかしたら少しは役に立つかもしれない、色選びのTipsです。 色の「トーン」を意識してみよう 色の基本、というと大抵どんな本を見ても「色相」「彩度」「明度」という三つのパラメータがまず出てきます。「色相」「彩度」「明度」というのは 色相…その色が「赤」なのか「青」なのか「緑」なのか、その色の「色味」 彩度…色の「あざやかさ」。 明度…色の「明るさ」。黒がもっとも暗く（明度が低く）、白がもっとも明るい（明度が高い）。 なのですが、この三つのパラメータをもとに色を考えていても、いまいち「どの色に
Life is beautiful: 本質的でないものを徹底的に排除すると美しくなる（「アップルのデザインの秘密」より）
アップルの作る製品のデザインがなぜあれほどにすばらしいかを熱く語った文章を発見。一番気に入った部分を引用してみる。 "The businessman wants to create something for everyone, which leads to products that are middle of the road," says Brunner. "It becomes about consensus, and that's why you rarely see the spark of genius." "Critical to Apple's success in design is the way Jobs brought focus and discipline to the product teams," Norman says. "[Jobs] had a s
デザインってスゴイんだってことをもっと本気で言わなきゃダメだと思う：DESIGN IT! w/LOVE
不確実な時代をクネクネ蛇行しながら道を切りひらく非線形型ブログ。人間の思考の形の変遷を探求することをライフワークに。 デザインというものを小さく捉えすぎてはいませんか？ 見た目を美しくするのもデザインだし、それを自分が持っていることに喜びを感じさせるような愛着を生み出すのもデザイン。 もちろん、そのモノとしての機能性を生み出すのもデザインだし、人々の暮らしの中で使い勝手のよいモノをなるようにするのもデザインです。 また、既存の技術にこれまでなかった用途を生み出すイノベーションを実現するのもデザインだと思います。 デザインというのは、そうした諸々を統合的、包括的にまとめあげる作業だと思うんです。 PowerPointで提案書を書くデザインがいかに包括的な作業で、統合力が必要なものか。例えば、PowerPointで提案書を書くことを例にとって考えて見ましょう。 提案書を書くという行為は、まぎれ
死ぬまでに見ておくべきCSSデザインサイト集まとめ - GIGAZINE
ということで、今まで数限りなくネットのあちこちで紹介されてきたCSSデザイン関連のサイトがリスト化されてまとめられたようです。これだけあれば当分はブログなどのデザインのネタに困ることはなさそう。インスピレーションを得るのに使うもよし、デザインの参考にするのもよし、知っておいて損はないものばかりです。 リストは以下の通り。 CSS Beauty | CSS Design, News, Jobs, Community, Web Standards http://www.cssbeauty.com/ CSS Drive- Categorized CSS gallery and examples. http://www.cssdrive.com/ Stylegala - Web Design Publication http://www.stylegala.com/ CSS Mania http:
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TableとCSSいろいろ - DesignWalker
デザイン初心者の方が気をつけると良いポイントあれこれ - DesignWalker
貧乏ウェブデザイナーの無料写真素材サイト : HotWeb Magazine
カラーオンチなウェブデザイナーのお助けサイト : HotWeb Magazine