良いデザインって？技術を学ぶ前に知っておきたいデザイン・レイアウトの基本的なこと
デザイナーになりたいって思った時にPhotoshopやIllustrator、cssやhtmlを勉強しなきゃな〜><て考えると思うのですが、技術的なことを学ぶ前にまずデザインが出来なきゃ始まりませんよね。 センス？かっこ良さ？奇麗さ？良いデザインにしたいけど、何をしたらいいかわからない。そんな時に何を考えたら良いのかデザインの基本をまとめてみようと思います XD はじめに 良いデザインって？ 最良の方法？ 1.コンテンツの目的 2.ターゲット 3.これらを組み合わせた例 デザインの基本 1.書体について 2.ジャンプ率 3.ホワイトスペースを生かす >ホワイトスペースで情報を分割する >ホワイトスペースで囲む >ホワイトスペースにあえてはみ出す 最後に はじめに デザインという言葉を聞くと、かっこいい、かわいい、おしゃれ、きれい、などと感覚的なものを思い浮かべる方が多いのではないでしょうか
デザイン上級者 21の特徴
デザイン上級者は、中級者と初心者と何が違うんだろう？って思った時に、こちらの本が役に立ちました。 『上達の法則 – 効率のよい努力を科学する –』という本です。この本には、碁や茶道など、あらゆる分野に共通する上級者の特徴がのっています。この本を参考に、デザイン上級者の特徴と、上級者になるための実践方法を書いてみました。 デザイン上級者の特徴 1. 上級者は一つのデザインから読み取ることが多い 一つのデザインを見たとき、上級者の方が中級者、初級者よりも気づくことが多いです。例えば、背景に薄くグラデーションがかかっているとか、縦のグリッドのラインが揃っているなど。 また、そのデザインからたくさんの情報を引き出しているので、長く見ても退屈しにくいという特徴を持っています。 2. 上手なデザインをするということに高い価値をおいている 上級者は、デザインに対して本気で取り組む度合いが高いため、上手な
[CSS]hr要素をおしゃれにスタイリングする8つのテクニック
デモページ CSS3を使った8つのテクニック デモページの8つの実装方法を個別に見てみましょう。 HTML HTMLは全デモ共通で、hr要素にclass名を付与するだけのシンプルな実装です。 <hr class="style-one"> [ad#ad-2] CSS スタイルシートは各デモのキャプチャとともにご紹介。 繊細なグラデーションを使ったデザインです。 hr.style-one { border: 0; height: 1px; background: #333; background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc); background-image: -moz-linear-gradient(left, #ccc, #333, #ccc); background-image: -ms-linear-gr
Appleから学ぶウェブデザインに役立つ10のチップス
10 Lessons on Design We Can Learn From Apple [ad#ad-2] 下記は各ポイントを意訳したものです。 #1: Simple Is Better #2: 商品写真の使い方 #3: コントラストを効果的に #4: 簡単に妥協しない #5: Flashから離れる #6: フレンドリーに #7: グリッドの活用 #8: Learn moreコンテンツ #9: 一貫性 #10: ただのコマースサイトにしない #1: Simple Is Better 派手なデザインの「購入する」ボタンやグラフィックが満載のウェブページほど嫌なものはありません。それは取り散らかされただけの下品なページです。 Apple Store Appleのページは「less is more」の好例で、派手な広告やプロダクトであなたを攻めたてることはなく、むしろあなたが見るべき一つのもの
数字はデザインに重要な要素。数字の見せ方10個（サンプル有り〼） | ユーモアのある人生を。【Maka-Veli.com】
どーも。最近SNSの使い方がわからなくなりつつある僕だよ。 久々にデザイン系のネタ。いや、ちょっと乗り遅れたタイポグラフィネタか・・・ 広告で数字が一番の訴求対象になる場合は多く、 数字だけで完結する物もあります。 そういった場合は、数字デザインをこだわりたいですね。 テレビ東京新卒採用サイト 7chと第7感って事でかけてますね。 モビット 数字を強調させる設計ですね。数字自体の効果が凄くキレイ。 No.DesignTech The 10 意味不明にカッコ付けてみました。以下が見せ方と自作サンプルです。 目次 数字以外を小さく 丸で囲ってみる 枠端で薄く背景に イタリックに 比較させる 数字だけを強調 弱い要素のアイキャッチに 数字だけでも シンプルな物は英字と組み合わせるのも 本文中は太字、下線を取り入れてみる 数字以外を小さく 見たい、見せたいのは数字です。 広告の
[連載]Webデザイン入門（2:スケッチしよう） | Stocker.jp / diary
私は、職業柄（？）プログラマー・SEの方などに「これからWebデザインもやりたいけど、どうすればいいか」と相談されることがあります。 そういう時、私はまず「優れたデザインのサイトを見て、それをスケッチする」ことを薦めています。 たった1度やって頂くだけでも、明らかにデザインに対する見る目が変わるのでお勧めです。 なぜスケッチが必要か？ 多くのPCスクールやWebスクールでは、Photoshop などの「ソフトの使い方」を中心に教えているようですが、それだけだとWebサイトをデザインするのは難しいと思います。 なぜなら、Photoshop などのソフトは「頭の中にあるもの」を制作することはできますが、「頭の中にないもの」を制作することは難しいからです。 デザインは、ソフトが自動的にやってくれるものではありません。 自分の力で1から作る必要があるのです。 そのために、「良いデザイン」とされてい
![[連載]Webデザイン入門（2:スケッチしよう） | Stocker.jp / diary](https://cdn-ak-scissors.b.st-hatena.com/image/square/6ab5cbd3dd1186ff326b5535187635828fcee5c0/height=288;version=1;width=512/https%3A%2F%2Fi0.wp.com%2Fstocker.jp%2Fdiary%2Fwp-content%2Fuploads%2F8c4a9bf2a4c1d3459b7f3b5db1bf2eb5-500x304-1.png%3Ffit%3D500%252C304%26ssl%3D1)
Webデザインの1pxを作るためのPhotoshopのレイヤースタイルいろいろ
色んな Webサイトを見ていると、1px にこだわって作られたキレイなデザインがたくさんあります。私は Photoshop を使っているので、Photoshop のレイヤースタイルを使って、1px の細かい所を作る Tips をまとめてみました。基本的な操作ばかりなので、これから Photoshop で Webデザインをやってみたいなーという人向けの記事です。 色んな素敵なデザインの Webサイトを観察していると、1px の細かいところまでこだわって作られてるデザインってとても多いですよね。1px … Webデザインでは一番小さいサイズ。「神は細部に宿る」という言葉もあるけれど、1px までしっかり作られたグラフィックはとても美しいですね！ 今回は Photoshop を使って、いろんな 1px を作ってみました。とは言っても難しいグラフィックデザインを作るわけではなくて、レイヤースタイル
非デザイナーも知っておきたいデザインにある葛藤とホンネ
去年から恒例イベントになっているWebSig 1日学校。古い学校の校舎を使って正に学校で学んでいるような気分で参加できるこのイベント。今年は「デザイン視点のコミュニケーション術」というタイトルで講師をさせていただきました。主催者からの依頼が非常に難易度が高く、扱うトピックからスライドの完成まで悩みながら作りましたが、そのプロセスで見えたところもたくさんあり、イベントも含めて学びと出会いがたくさんありました。 なぜ『作る』以外について語ったのか デザイナーの仕事はレイアウト、UI、ルック&フィールなどを作る人。コンセプトや潜在的にあるものを視覚化出来る人と捉える方が多いと思います。作り出すことがデザイナーの能力ではありますが、語られる部分が「作る」という部分に集約してしまいがちです。しかし、実際のところ「作る」部分というのはデザイナーの能力のほんの一部でしかなく、それ以外が重要だったりします
無料・商用OK・リンク不要の、やわらかい印象の日本語フォント・はんなり明朝 - かちびと.net
以前ご連絡を頂いたフォントポ日本語の 作者さんから新作のお問い合わせを頂 いたのでご紹介。やわらかい印象の明朝 系フォント、「はんなり明朝」です。こちら も商用で利用できるとのことです。なんとも 太っ腹ですね・・ フォントポ日本語の作成者さんからまたまたご連絡いただきました。いつもありがとうございます:D 商用で利用できる日本語フォントに新しく仲間入りです。 かわいいですねーｗきりっとした印象の明朝ですが、こちらは少しふんわりとした印象を与えられそう。明治時代の築地体を参考に作られたそうですよ。 利用規約 利用規約は 当サイトのフォントはすべて無料です。個人・商業用途での利用について特に制限はございませんので、どうぞお気軽にご使用ください。ただし、フォントデータの改変はおやめください。また、フォントの使用によって生じたいかなる結果や損害につきまして、一切の責を負いませんのでご了承ください。
ポップカルチャーに刻まれた 私たちの2年 | STUDIOVOICE【前編】アニメ・コミックス
VOL.4152019年9月20日（金）発売 「We all have Art. 次代のアジアへ――明滅する芸術（アーツ）」 今号「We all have Art. 次代のアジアへ――明滅する芸術（アーツ）」は、前々号（vol.413）「Flood of Sounds from Asia いまアジアから生まれる音楽」と題した音楽特集、そして前号（vol.414）「Self-Fashioning from Asia あらかじめ決められない流儀（スタイル）へ」と題したファッション特集に続く、アジア三部作の完結編となります。 特集では、ノーベル文学賞作家、ル・クレジオの未翻訳小説『ビトナ、ソウルの空の下』の特別抄録にはじまり、世界的大ヒットを記録している『三体』シリーズを手がける中国SF界の巨匠、劉慈欣（リウ・ツーシン）の自宅インタビュー、さらにここ日本でも注目を集めている韓国の文学／現代詩と社
Webサイトにおけるユーザービリティの復習をしたので、よくチェックするポイントをリスト化した - かちびと.net
ユーザービリティに関して少し復習したので メモっておきます。初心忘れるべからずという 事で・・・Webサイトは基本的にユーザビリティ を考慮したレイアウトやコンテンツが理想です。 もちろんケースバイケースではありますが、 これは全共通して言える、という事を忘れない ようにメモ書き。 というわけで、申し訳ないですけど目新しい事は何一つ無い内容です。 そもそもこのブログ自体ユーザビリティを考慮した設計とは言えません（「やっちゃダメなこと」もしています）ので全然説得力ない感じです。 いろいろとテスト&エラーをして行きたいのでご了承下さい。 はじめに 正しいユーザビリティはコンテンツによってケースバイケースだと思いますが基本的には僕はヤコブ・ニールセンの考えに従っています。 全ての項目は「すべてが正しい」ものではありません。100のサイトがあれば100通りのユーザビリティが考えられるはずです。場合
Google Mapのデザインを変更する方法（StyledMapの使い方） - KAYAC Engineers' Blog
豚を丸焼きにするイベントで日焼けしました。ago（@kyo_ago）です。 すでにだいぶ時間がたってますが、7/7に弊社コーポレートサイトのリニューアルを行いました。 その際会社までの道順を紹介するページでGoogle Mapのデザインを変更したのでその方法をご紹介したいと思います。 StyledMapType Google Map Ver3以降はStyledMapTypeというAPIが追加されており、このStyledMapTypeを使うことで地図上の指定された要素に対して独自の色情報を設定することができます。 色の変更方法 色を変更するにはStyledMapType API経由で以下のようにJavaScriptのObjectを渡すことで実現できます。 var styles = [ { // 色を変更する対象の指定（document参照） featureType: "road.local"
私がwebサイトのラフデザインを制作する時の流れ │ Design Spice
私がwebサイトのラフを作る時の流れを書いてみました。 独学で身に付けた方法であり、 一般的な方法ではないかも知れないことを予め断っておきます。 私にはやりやすい方法ですが、 他の人にとってはそうではないかもしれません… 本エントリーはラフデザインのみ注力するため、既にコンセプト、ターゲット、サイト構成などは決まった状態と仮定します。 （※本文中のショートカットキーは全てMacの場合です） 希望デザインのヒアリング ※委託業務の場合です どんなデザインが希望かを先方にヒアリングします。 この時にできるだけ、クライアントのイメージを明確にするため 抽象的でも良いので沢山言葉を貰います。 明るい、可愛い、ポップ、カッコいい、シンプル、落ち着いた…etc 具体的にデザイン参考にしたいサイトがあるのなら聞いておきます。 また頂いた言葉と自分のイメージのギャップを埋めておきます。 ”シンプル”と言う
【iPhone】デザイナー向けiPhoneアプリ特集！【オススメ】
こんにちは、ウンコの壁紙の携帯をトイレに水没させ、 携帯からiPhoneに変えました。ニシです。 もともと携帯もほとんど使わない私ですが、 iPhoneを一度使ってしまうと、もう手放せないというくらい 便利な機能やアプリが一杯ですね！ 今回は、デザイナー向けのオススメアプリをいくつかご紹介したいと思います。 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ Color Stream 写真に使われている色をカラーパターンにして保存できるアプリ。 そこから自分で編集する事もできたり、写真にして保存することができます。 ★オススメポイント★(○ゝω・)b⌒☆ 今回のデザインのトーンを、この写真のイメージに近づけたいんだけどな〜 って時におすすめ！ 値段：￥350 アプリのダウンロードはこちら！ what the font 画像から使っているフォントを検索
WEBデザイナー向け☆iPhoneアプリのUIデザイン
どーもキンモクセイぷんぷん香る自由が丘からaoizmです。 秋満開！スマートフォンまっさかり！(強引) KAYACでもiphoneアプリ制作のお仕事が増えてきております。 WEBデザイナーがiphoneアプリのデザインをする際に、やっぱり気になるのがWEBとの違い。 画面サイズが小さく持ち歩けるデバイスiphoneは、デスクトップ上のアプリやWEBサイトとは 使用環境もその操作方法も異なるため、WEBとは違ったインターフェイスが求められます。 その違いを認識した上で、違いを活かしたデザインをするためには？ iPhoneアプリのUIデザインまとめてみました。 WEBサイトとiphoneアプリの違い 状況 持ち歩けるがゆえそのシチュエーションもさまざま 「会議で」「合コンで」「移動時」「就寝時」... 状態 そのときユーザーはなにをしている？ 「歩きながら」「話しながら」「運動しながら」...
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「Adobe Kuler」に登録されているカラーテーマを利用して、楽しみながら配色を学べる『Saturation』