デザインする上で大切にしていること - デザイナーのイラストノート
デザインしてますか？spicagraphです。ふだんツールに関する記事を書いたり、Twitterでつぶやいたりしていると「こいつ見た目のことばっかりやな」と思われそうで、めずらしくデザインするとき大切にしていることについて書きます。わたしの仕事は主にEC、LP、プロモーション、コーポレートサイトなので、UI/UXみたいなかっこいい話でないことは前置きしておきます（でもだいじなおしごとだよ！） デザインは誰のため？ 大前提として、わたしは誰に向かってデザインしているのか。 わたしはフリーランスで仕事をしているため「お客さん」がたくさんいます。仕事をくれた制作会社のディレクターさん、クライアント、ユーザーです。webサイトの「お客さん」はユーザーですが、ユーザーだけがいいと思うものだけが良いデザインだとは思いません。 webサイトは更新されていくものです、多くの場合はクライアントによって。とい
ズルいデザインテクニックを生かして作る、汎用性のあるズルいボタンデザイン
さて今回は、ズルいデザインテクニックの集大成ともいえる「ズルいボタン」です。これまでの連載で取り上げた数々のズルいデザインテクニック、「ズルいテキストシャドウ」「ズルいグラデーション」「ズルい角丸」、そして前回解説した「ズルいボックスシャドウ」を用いたズルいボタンの作り方を解説します。 今回のズルいボタンに関しては、以前にズルいデザインテクニックのスライドで紹介したものから大幅に改定を加えて、より汎用性があり、さまざまな場面で使い勝手の良いものに刷新しました。 改良のポイントは次の通りです。 文字サイズの変更、またそれに併せてボタンサイズの変更に対応しています iタグを使ったアイコン用のWebフォントに対応しました。今回はfont-awesomeを使って解説しています フラットデザインの流行に伴うデザイン傾向に合わせ、立体感やグラデーションをより控えめに、かつpaddingを大きめに取った
Webデザイン制作で参考になるサイトリンク集15個+2個 - ホームページ制作やリニューアル印刷物デザインなら大阪のWPC
Webデザイン制作で参考になるサイトリンク集15個+2個 Webデザイン制作で参考になるサイトリンク集15個と、ランディングページ、ロゴの参考サイトを集めてみました。 ご存知のものも多数あるかと思いますが、HTML5やレスポンシブサイトを集めたものもありますので、カッコイイ、オシャレなサイトを作る参考にしてみてはいかがでしょうか。 WEBデザインのリンク いけてるサイトドットコム ウェブデザインに役立つ、いけてるサイト、かっこいいサイト、おしゃれなサイト、クールなサイトなどを集めたWEBデザイナーのためのWEBデザインのリンク集。 http://www.ikesai.com/ デザイケ -Design Iketeru- イケてるサイト、カッコイイ、オシャレなサイトなどを紹介するWebデザインのリンク集です。 http://design-iketeru.azu-mi.com/ Good De
デザインセンスが壊滅的な私が良い感じの配色を実現させている方法 - あなたのスイッチを押すブログ
資料の出来栄えを大きく左右する「色」。資料を作り込むほどのめり込み、抜け出せなくなってしまう。何が正解か分からず、全く抜け出せない泥沼。 「もうちょっと青みを…」「いや、赤みが強すぎるから、彩度を落として…」「この色の組み合わせはないなぁ。何色を差し色にしよう…」 色は無限大。限りある知識と経験だけでは、なかなか正解の配色を手に入れられないことでしょう。 そんな時に私が役立てている、配色に関するお話しを致します。 カラーパレットは自作しない そもそも私は美術的なセンスがありません。美術の成績も、彫刻などの造形ものはそこそこでしたが、絵画的な課題はてんでダメでした。 そんな私が自分で配色を作ろうと思ったら、時間がいくらあっても足りません。そしてクオリティは、かけた時間に反比例していくでしょう。 ですので私は、自分で作りません。他の色んな物を利用します。 それは時に写真や画像であったり、人が作
視覚的に情報を伝える！実例で見るインフォグラフィックスの魅力
2015年1月21日 インスピレーション, 便利ツール インフォグラフィックスとは情報やデータをを視覚的に表現したものです。情報を素早く簡単に表現したい場面で用いられ、私たちの身の回りにある路線図や会議での資料、学校の教科書などなど、様々な形で目にする事があるかと思います。今日はそんなインフォグラフィックスに注目してみましょう！インフォグラフィックスを制作する機会がないという方でも、全体のデザインやアイコン制作、配色のアイデアになりますよ！ ↑私が10年以上利用している会計ソフト！ なんでインフォグラフィックスを使うの？ インフォグラフィックスで情報を視覚化することで、伝わりづらい数値や専門的な情報も比較的伝えやすくなります。簡単に例えると、「チョコレートを食べる量が2011年は200kgだったのが、2012年は240kgに増えました」と文章だけで説明されるより、棒グラフで推移を視覚的に見
2013年試してみたい、フレッシュなウェブデザインのテクニック
ウェブデザインの基本はおさえつつ、フレッシュでクリエイティブものを取り入れたい！ そんなデザイナーに役立つテクニックを紹介します。 Fresh and Creative Web Design Techniques 下記は各ポイントを意訳したものです。 はじめに ホワイト/ネガティブスペースをもっと ピーチとサーモン より大きいのがベター イメージを動かす ストックフォトは使わない はじめに デザイナーとして、このことは新年を迎え最も興味深いものの一つです。そうです、2013年のデザイントレンドは何が大きくなるのかです。これは非常に大切なことです。 そのトレンドの後に次が何であるか、ウェブデザイナーは新しいトレンドが何であるか適切に把握しておかなければなりません。 トレンドは本当にデザインを面白くします。 もちろんレスポンシブは今年のトレンドでしょう、昨年もトレンドでした。そして、私たちはグ
コーディングする時のスライス方法とか - CSS HappyLife
珍しく、Photoshopネタでも。 コーディング関係だからこのブログの主題っぽい！ 今回は、PhotoshopCS6を利用したスライスに関するアレコレです。 コーディング時にはスライスは必須ですし、一番面倒な部分なので少しでも効率良くスライス出来ると良い感じですよね。 内容としては、スライスの基本からって訳じゃないので、最低限スライスツールが使えてる方を対象にしたような感じになってると思います。たぶん。 ちなみに、面倒な説明しなくていいから分かりやすい様に動画ベースでやっていきます！ Photoshopを起動します 何はともあれ、Photoshopを起動します。 これはすごく重要な作業です。 Photoshopは重いので起動するのがダルいですね。ウチのVAIO Zが頑張ってます。 CS3の頃はサクサクで良かったんですが。 起動したら、psdファイルを開きましょう。 普通のスライス まずは
ガーリー好きがお届けするガーリーデザインのポイント5つ ｜ Kana-Lier カナリエ
ブログがとってもガーリーだね、と嬉しいお言葉を頂くことが多いKanaです。 とっても可愛いガーリーなデザインは、作っていても見ていても幸せな気分になるので大好きです。 そんな私がガーリーデザインをする際、気をつけているポイントをご紹介します。 1.配色は甘く、優しく。スイーツのような彩りを。2.テクスチャを利用して、やわらかさや、素材感を加えてみる！3.パターンを使うだけでガーリーに！ストライプとドットが素敵！4.安定感よりも、繊細なイメージを意識する。5.かわいい小物をコラージュしたり、装飾を加えて、可愛らしさをアップ！ 1.配色は甘く、優しく。スイーツのような彩りを。 ガーリーデザインの配色を考えるときは、甘く優しい色使いを意識しています。 今ひとつピンと来ない時は、googleの画像検索でスイーツ、ケーキ、マカロン、アイスクリーム、ジェラート等を検索しイメージを沸かせます。 私が好き
それじゃあ何も伝わらない！元ディレクターがデザイナーになって気付いた、デザイン依頼で注意すべき4つのこと : LINE Corporation ディレクターブログ
ネッツアイに火の用心 あなたのハートにG-SHOCK！こんにちは、nakatanigoです。 かつてはディレクターブログを書く立場だったのですが、諸事情により遠ざかっておりました。 というのも、かつて前職でデザイナーをしていた経験から、ディレクターを２年ほど経験した後、デザイナーに転籍したのです。 そこで、今回はその経験から、ディレクターからデザイナーにデザインを依頼する際に注意すべきことをお話させていただきます。ディレクターがデザイナーに依頼をする際、こういう言い方は避けたほうがいいという事例もあわせてご紹介します。 大前提として、デザイナーはディレクターから言われたことしかやらないわけではありませんので、依頼に疑問があれば質問し相談します。しっかりとコミュニケーションをとれば下記のような事例は起こらないと思いますが、それが抜けてしまった場合には効果の小さいデサインができあがってしまうと
クオリティが高い縦に長いサイトを厳選して集めています MUUUUU_CHANG WEB DESIGN SHOWCASE
縦長のwebデザインをがむしゃらに集めています。
ウェブデザイナーは知っておきたい、ページレイアウトの代表的な10のパターン
実際のウェブサイトを例に、ずっと廃れないであろうページレイアウトの10のパターンとその特徴を紹介します。 10 Evergreen Website Layouts (that will never go out of style) [ad#ad-2] 下記は各ポイントを意訳したものです。 2カラム、広いヘッダ 3カラム、広いヘッダ フォーボックス 不確定なグリッド 大きいスクリーンショット シングルカラム 打ち出し画像 固定サイドバー グリッドベースのギャラリー マガジンスタイル [ad#ad-2] 2カラム、広いヘッダ これは最も普通のレイアウトと言ってもよいでしょう。広いヘッダが上部にあり、960pxを2カラムにし、一つは広く、もう一つは狭くしたものです。狭い方はサイドバーでナビゲーションなどが設置してあります。 慣習的に、ブログでは広い方の右にナビゲーションを置き、スタティックなサイ
まるでフルFlashなjavascriptを使用したWebサイト集めてみました[日本編]
Posted: 2011.05.19 / Category: WebDesign / Tag: デザイン参考 最近はjavascriptで表現できることが増え、前まではFlashでしかできなかった効果もできるようになりましたね。 ということで、マウスオーバーや画面遷移でアニメーションしてるとか、ちょっと変わったレイアウトをjavascriptやっているサイトを集めてみました。
![まるでフルFlashなjavascriptを使用したWebサイト集めてみました[日本編]](https://cdn-ak-scissors.b.st-hatena.com/image/square/2af3fd7a8f5f909f22826d83073f10812b6f854a/height=288;version=1;width=512/https%3A%2F%2Fwww.webopixel.net%2Fblog%2Fwp-content%2Fuploads%2F2011%2F05%2F110519_s.jpg){kind=tracking}
国内のiPhoneアプリでデザインが参考になったWebサイトいろいろ
以前からちょいちょいブックマーク していたんですが、いつの間にか増 えてたので一覧化してみたいと思い ます。国内のiPhoneアプリサイトで Webデザインが参考になったサイトの まとめ。あんまり無いですが・・ 個人的な備忘録とメモ書きです。探し方も悪いと思いますので数はさほど網羅していません。「あそこ凄い素敵なのに載ってない」みたいなご意見ありましたらコメント欄にてご教授頂けますと幸いです。 この記事で見たいのはアプリではありませんのでWebサイトへのリンクしかありません。順不同となっています。シェア系アプリが多いです。 MogSnap 食べたものを写真で評価、共有するiPhoneアプリ。写真系なのでこういったスライドがあるとアプリの概要をイメージしやすいですね。無料であること、キャプチャ、アプリダウンロードのボタンが分かりやすく明示されています。 MogSnap 大辞林 言わずと知れた
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
Ngi-d.net
Web制作会社に飛び込んだ新入社員にとりあえず読ませたいスライド
Tumblrで作られたスゴいWebサイト
http://webdesignmatome.com/web-tips/design-book
Web制作者が読んでおきたい、最近公開されたおすすめのスライド
http://webdesignmatome.com/webdesign/inspiration
