ウェブデザインをはじめるあなたへ - ウェブ雑記
ウェブデザインについてまったくわからない頃によく見て勉強してた資料群です。＋いくつかの自分で作った資料 SlideShare 色彩センスのいらない配色講座 色相、明度、彩度で色を説明できるようになる。 ベースカラー、メインカラー、アクセントカラーで配色を説明できるようになる。 その上で、あまり間違いのない色の選び方がわかるようになる。 ノンデザイナーのための配色理論 最後に紹介されているこのツールがベースカラー、メインカラー、アクセントカラーを決める上で便利。 ウェブサービスの企画とデザイン 僭越ながら明治学院大学で講義した時に作った資料。 なんとなくウェブサービスを作るときの流れとか感じてもらえたら幸いです。 かんたんキレイなウェブデザイン 僭越ながら勉強会 (UT Startup Gym) 用に作った資料。 なんとなく CSS フレームワーク、グリッドシステム、レスポンシブデザイン、ウ
Bootstrap
Introducing Google Bootstrap. Need reasons to love Google Bootstrap? Look no further. By nerds, for nerds. Forked from Twitter Bootstrap, built by todc, Google Bootstrap utilizes LESS CSS, is compiled via Node, and is managed through GitHub to help nerds do awesome stuff on the web. Made for everyone. Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as I
designclue [デザインクルー] 高品質なデザインを、簡単かつ手頃な料金で発注できるサービスです。
ネット上から発注 カテゴリとプランを選び、指定されたフォームに従って作成するだけでコンペを今すぐで開催できます。
Amazon流の開発術では、まずプレスリリースを作る | fladdict
Amazonでは製品開発をするとき、まず最初にプレスリリースを書くらしい。これは”Working-Backwards“と言うデザイン手法。面白げなので色々と調べてみた。 Working-Backwards法の商品開発では、お客様の視点をスタート地点にするため、開発前にプレスリリースを作成する。プレス内容は、既存プロダクトの問題点と、それを新製品がどう解決するかが中心になる。 プレスがユーザーに響かなかった時点でプロジェクトはボツ。そもそもその商品は作らない。これにより見当違いな商品を作るリスクを、一番最初の段階で低コストに回避できる。 このWorking-Backwards法で書くプレス内容は主に以下のとおり。 見出し 顧客が商品を理解できるタイトル 副題 ターゲット層と、彼らのメリットを1行で。 概要 商品の特徴と利点をまとめる。この段落で全てを理解できるように。 課題 このプロダクトが
23人のカヤック社員がおすすめする「つくるときに役立つ三種の神器」まとめ | KAYAC DESIGNER'S BLOG - デザインやマークアップの話
7月7日に行われる面白法人カヤックのイベントである「777☆カヤックフェスティバル」に向けて、 6月6日〜7月6日までの間、 ディレクター、エンジニア、フロントエンジニア、デザイナー、 全職能のブログを、同じテーマの記事でつなぐ「777ブログウェイ」を実施していました。 23人のカヤック社員が、「つくるための3種の神器」をテーマにブログを書きました。 そのまとめ記事になります。 デザイナーまとめ 新しいPCに入れる基本ソフト3つ：Windows版 新卒Webデザイナーが考える「五月病」を脱却する方法 Workflow para reducir el tamaño de tus assets デザインするための三種のリファレンス グラフィッカーの三種の神器！？ 思わず絵が描きたくなる（！？）三種の神器 ディレクターまとめ もっと知りたい！「好奇心」をつくる３つの視点とサービスを紹介します
何だこれ！？脱帽するほどの斬新なアイデア
今日は土曜日ですので、軽めの記事を書こうと思います。 すばらしいアイデアやすばらしいデザインに触れることはクリエイターとして大事なことです。私達は物を作り出す仕事をしているので、ひらめきを大切にしなければなりません。 ひらめきを生むには、普段から多くの情報に触れる必要があります。それも偏った情報ではなく、多岐にわたった様々な情報に触れるほうが、よりすばらしいひらめきを生み出す可能性が高まります。それがどんなにくだらない情報であっても、ひらめきに変わる可能性があるんです！ そこで今回、私が「これは脱帽するほどの斬新なアイデアだ！」と思えた物を紹介いたします。 【脱帽するほど】なんて立派なタイトルをつけてしまいましたが、内容はだいぶ軽いものです。だいたい私は帽子が嫌いなんで脱帽する帽子を持っていません。時間にゆとりがあれば、箸休め的な感覚で読んでもらえればよろしいかと思います。
米国のデザイン教育から学んだこと デザイン会社 ビートラックス: ブログ
はじめに教授からのWhy? Why? Why?と立て続けに押し寄せる「どういったロジックを元に〜をデザインしたのか？」という質問の嵐に対して、学生達がBecause, Because, Becauseと素早く理論を構成して「何故なら〜だからです」というロジックを組み立て続ける。 そんな米国大学で展開されるデザイン講義を目の辺りにしてきた僕は、「デザインとはこんなにも理論的なプロセスだったのか」という率直な実感を持っています。 デザインと聞くと生まれ持った才能を存分に発揮してクリエイティブに様々なものを生み出していくというイメージをお持ちの方も多いかも知れませんが、これは全くの誤解であると言えます。 本来、デザインプロセスとは問題解決を前提としているため、地味な作業の連続であり、非常に理論的なプロセスで構成されています。 僕は日本で5年間、米国で3年間デザインの教育を受けましたが、実感として
アップルのデザインの進め方、責任者ジョナサン・アイヴが語る
アップルのデザインの進め方、責任者ジョナサン・アイヴが語る2012.03.15 22:006,721 福田ミホ アップルをアップルたらしめている何かが、感じられます。 MacBookやiPhone、iPadといったアップル製品に共通する大きな特徴のひとつは、それぞれに独自性が高く美しいデザインです。そんなアップルのデザインを取り仕切る人物は、インダストリアルデザイン担当上級副社長のジョナサン・アイヴです。彼はデザイン業界への貢献を評価され、出身国であるイギリスから｢ナイト｣の称号も与えられています。 そんなアイヴが、ロンドン・イブニング・スタンダード誌でのインタビュー記事の中で、アップルのデザインの秘訣に触れつつ、他社の問題点も指摘しています。また、我々ユーザーについてアップルがどう見ているのかも、話しています。 以下、インタビュー記事からの抜粋です。 Q：アップルのデザインは、どこが｢違
リッチに見せるデザインテクニック。Appleのデザインのように美しい金属調の質感を表現する方法。 (フェンリル | デベロッパーズブログ)
こんにちは、イメージ担当の長谷川です。 今回は Apple がデザインしている iCloud アイコンのような美しい金属調の質感を Fireworks で表現してみました。 アレンジ次第で水平のエッチングやブラスト加工のようなイメージも簡単に作ることができます。 ぜひ Web や UI デザインの参考にしていただければと思います。 1. ベースのテクスチャを設定する まずグラデーションの設定をします。 長方形ツールで作成するボタンなどのサイズより少し大きいサイズの四角を描き、グラデーションの塗りを円錐にします。 以下のように白とグレーを交互に設定します。右端と左端を同じ色にしないとグラデーションに線が出来てしまいますのでご注意ください。 ここでは濃いグレーを #666666、両端の薄いグレーを #999999 に設定しています。 次にノイズを適用量：10で追加します。これが同心円状のヘアラ
アマゾンってもう古い！？デザイナー商品のショッピングサイトが大躍進：日経ビジネスオンライン
「オンラインの買い物と言えば、やっぱり価格が安いアマゾンだよね」と話していたのも束の間。デザイナー商品を扱うオンラインショッピングサイトが急拡大し、また別の市場を作り出している。その流れを牽引するのが、ニューヨークを拠点とするデザインプロダクトを扱うFab.comだ。今年6月に始まった、スタートから僅か6ヶ月のこのサイトは、すでに140万人の会員を獲得し、60万点以上の商品を売り上げている。 今までもデザイナー商品を扱うサイトはあったはずだが何が違うのか？。それは「フラッシュセール」という、時間限定の特価販売のマーケティングを採用している点だ。サイトでは一日に14点の商品を発売し、どの商品も特別価格で販売される。ただし売り出し期間はそれぞれ72時間、つまり3日でおしまい。それもデザイナー商品なので一点ものや在庫の薄い商品も多く、売り切れればそれで終わりだ。期間限定でデザイナー商品が安く、し
リッチに見せるデザインテクニック。美しいぼかしで魅せる 『MAX 塗り』のすすめ。
こんにちは、イメージ担当の長谷川です。 今回は 1px にこだわったリッチな Web や UI デザインを更に立体的で奥行きのある雰囲気にする『MAX 塗り』を取り入れたグラフィック作成手法をご紹介します。 ところで『MAX 塗り』ってご存知ですか？ガンプラなどが好きな方はピンと来たと思いますが、プラモデルなどに興味がない人は全く分かりませんね。 『MAX 塗り』とはプラモデルに立体感を出すためにエッジから中央に向かってぼかしていく、昔からある「ぼかし塗り」や「グラデーション塗り」の技法です。 この技法で塗装されたプラモデルは単純に塗装したものより格段に迫力や存在感が上がります。プロモデラーの MAX 渡辺さんが良く使うプラモデルの塗装技術として通称『MAX 塗り』と呼ばれています。 Web や UI にこの『MAX 塗り』を取り入れる方法は簡単です。 作ったボタンや背景などのグラフィック
チームでWebサイトを制作する際に気をつけたい10のマナー
2013年9月26日 Webサイト制作, フリーランス Webサイトの制作会社で働いている人はもちろん、普段一人で活動しているフリーランサーの方も、フリーランサー同士が手を組んでWebサイト制作を行ったり、制作会社がフリーランサーに受注するなどで、複数の人でひとつのサイトを制作することもあると思います。そんな時に起こりやすいトラブルと、それを防ぐ方法を考えてみます。ちなみに今回はデザイナー目線での気づいた事です。プログラマーさん目線での気をつけたい事などあればお聞かせください :) ↑私が10年以上利用している会計ソフト！ デザイン時 1. レイヤーに名前をつける 「もらったPhotoshopファイルを開いたら、どれがどのレイヤーなのかさっぱりわからない！」なんて体験、ありませんでしたか？デザインファイルを共有する場合はレイヤーの管理がとても大切です。「レイヤー０」「レイヤー１」「レイヤー
僕のWEB屋人生で見つけたテクスチャ、パターン系の素材サイト全部 | バンクーバーのうぇぶ屋
もはやタイトルのまんまなんですが。 僕がWEB屋を初めてから、背景やボタンのアクセントに使うようなテクスチャとかパターン素材とか、とにかく沢山見て来た物をメールから、ブックマークから、チャットから、Evernoteから引っ張り出して数ある限りご紹介させて頂きます。 僕の場合は、こういうサイトを見てテクスチャのアイデアを探すことの方が多いですね。 ちなみに数も多いので、devianaartやらeverystockphotoなどの超有名どころは外しています。では、早速見ていきましょう。 Subtle Patterns | Free textures for your next web project 種類はそこまで多くないですが、使いやすい感じのパターン素材ですね。個人的に一押し！ Texture | Premium Pixels 以前の記事でご紹介した、ハイクオリティなPSDがダウンロード出
デザインの基礎、黄金比から大和比、第2黄金比まで - kojika17
よく黄金比という言葉を聞いたりしますが、実際にどういうものかわかっていなかったり、 デザインの当てはめ方が分からなかったりすることが多いので、簡単にまとめてみました。 貴金属比 nの場所に自然数が入り、第1貴金属比を黄金比、第2貴金属比を白銀比、第3貴金属比を青銅比といいます。 よく聞く黄金比は、貴金属比の１つです。 近似値 1.6180(約5:8) CSSで黄金比を見る 伝承では古代ギリシアから使われ始めたと言われています。 パルテノン神殿、モナリザなど数多くの建築物や美術、アートなどに使用されています。 白銀比 白銀比には、以下の2つがあります。 1:1+√2 の第2貴金属比に含まれる白銀比 1:√2 の日本で古くから使用されている白銀比(大和比) どちらも白銀比と呼ばれることが多いので、紛らわしいです。 白銀比(第2貴金属比) 近似値 1:2.414(約5:12) CSSで白銀比を見
プログラマーがかっこいいWEBサイトを作る5つのコツ - おかねがない(ﾟ∀ﾟ)ｯ!!
「かっこいいサイト作るぞ！」 と意気込んでみたももの、いざ作ってみると 「あれ･･･なんかダサい･･･」 WEBサイトを作成したことのあるプログラマーの方なら、 経験したことがある方も多いのではないでしょうか？ WEB制作は、基本的に、デザインはデザイナー、システムはプログラマー、という 役割分担の元に作業が行なわれるため、プログラマーが見栄えのするサイトを作ることは、 簡単なようで、なかなか難しいことです。 かくいうプログラマーである私も、いくつかのWEBサイトを個人的に作成してきましたが、 自分で納得のいく見た目のサイトが作れず、夜中の謎のハイテンション時にデザイン を完成させ、1度寝てから再度確認すると、そこには見るも無残なWEBサイトが･･･ なんていうことを何回も経験してきました。 そこで私が試行錯誤した結果を元に、プログラマーが、シンプルながら ある程度見栄えのするWEBサイト
書評「UIデザインの基礎知識」 - elm200 の日記(旧はてなダイアリー)
私はずっとプログラマとして活動してきたが、ウェブデザインをはじめとする見かけのデザインは苦手だった。ずっと避けて通っていたのだが、いまの時代、ウェブサイトのプロトタイプくらい自分で作れるようになりたいと思った。デザイナーの知人に相談したところ、紹介してくれたのがこの本。 ユーザーインタフェースデザインの基礎知識 ~プログラム設計からアプリケーションデザインまで~ 作者: 古賀直樹出版社/メーカー: 技術評論社発売日: 2010/04/23メディア: 単行本（ソフトカバー）購入: 11人 クリック: 170回この商品を含むブログ (15件) を見る 豊富な例を引用しながら、ユーザーインターフェイスをデザインする上で陥りがちな典型期な過ちを解説していく。数学科出身の著者というだけあって、解説は理論的で、感覚より論理を重視するプログラマにも分かりやすい。 理想的なコンピュータシステムは、ユーザー
黒と白のモノクロ調でインパクトの強い名刺デザインいろいろ - GIGAZINE
名刺デザインはできるだけシンプルにまとめたいという場合に最適なのが、白と黒のモノクロにしてしまうという方法。たった2色のように感じますが、リアルの印刷物である名刺の場合、インクや紙、印刷方法や加工などによって多種多様な雰囲気にすることが可能です。 Neat and Cool Collection of Black and White Business Cards http://naldzgraphics.net/inspirations/neat-and-cool-collection-of-black-and-white-business-cards/ 01.Aeris Network - Business Card by ~simonbouchard on deviantART 02.Black Inc free business card by *robbythedesigner o
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
“優しさ”を備えた深澤直人監修の無印良品キッチン家電。“満を持して”発売
エンジニアtype 技術者のキャリアを考えるWebマガジン - 転職＠type
吹き出し素材専門サイト「フキダシデザイン」