絶対に覚えておきたいwebデザインの配色・カラー3つの基本と基礎
webデザインを考える時にカラーは切っても切りはなせません。しかし、配色は苦手だけど、まぁカラーの勉強は後でいいや…センス無いしその前にやることあるし…となんとなく後回しにされがちなんじゃないかなーと思います。基本を知っておくと、デザインに役立つのはもちろん、クライアントさんに提案出来たり、私生活や料理etc…様々な場面でとっても強い味方になってくれるます。ちょっとしたスキルアップをしたいと考えてるなら、まずは配色から初めてみるのが良いかもしれませんXD 色って？ カラーモードRGBとCMYKとは？ 色の三属性について 「色相」 「明度」 「彩度」 具体的な例と配色方法 面積比率 可読性 最後に 1.色って？ まず一口に色といっても色々(シャレじゃないですw)あるのですが大きく分けて果物や印刷物など物についてる色とテレビやパソコンのモニターなど光を放っている色の2種類があります。 物体色
漫画家・窪之内 英策 先生のお絵かき講座が凄い！！ - 萌えイラスト上達法！ お絵かき初心者の学習部屋
ツルモク独身寮 チェリー ショコラ の作者である漫画家の 窪之内 英策 （くぼのうち えいさく） 先生が ツイッターをやっていることをご存知でしょうか。 今回は窪之内 先生がツイッターで公開しているメイキング講座が とても素晴らしい内容でしたのでご紹介したいと思います。 特に、色鉛筆によるキャラクターへのメイクは必見です！ ※この記事はブログを見てくださっている方からの情報を基に書かれています。 画像をクリックすることでツイッター元に飛ぶように設定しています。 動画再生にはグーグルクロームなどでご覧ください。 【メイキング講座①】 窪之内 英策 下絵。シルエットに気をつけながら裸で描きます。 服をデザインしつつ、着せる感覚で上描き。 下絵完成。 肌を塗るのだ！コピックCM2なのだ！ 髪はRV93なのだ！ 服はBG02とB02なのだ！ 靴はRV55なのだ！ キノコ塗るのだ！ いっぱい塗るのだ
モバイルアプリの最小タップサイズを考える | dotproof
モバイルアプリのUIデザインで難しいのはターゲットとなるデバイスの画面サイズに様々なサイズのものがあるということです。画面の大きさにはいろいろあっても人間の手や指のサイズはほぼ誰でも同じですから、どんな画面サイズであっても確実に押せるようなUIのサイズというのを把握してデザインしないと大変使いにくいものになってしまいます。 例えばiOSの「ヒューマンユーザーインターフェースガイドライン」では「タッチ可能な領域のサイズを約44ｘ44ポイントにしなさい」とし、サンプルとして電卓アプリの画面が紹介されています。 “Give tappable elements in your app a target area of about 44 x 44 points. The iPhone Calculator app is a good example of fingertip-size control
モバイルUIのデザインに役に立つUIパターンギャラリー集17選 - showrtpath - iOSブラウザ開発日記
2013-12-23 モバイルUIのデザインに役に立つUIパターンギャラリー集17選 アプリの開発の時にUIのデザインに悩みますよね。 そんな時、モバイルUIのパターンギャラリー集が役に立ちます。 そのギャラリーサイトのサイトを集めてみました。 スクリーンショットを集めたものと、デザイナーの作品のものがあります。 Showrtpathブラウザを開発していた時はdribbbleをよく見ていました。 Pttrns - Mobile User Interface Patterns 優れたiPhoneサイトデザイン集 - iPhoneデザインボックス Mobile Patterns lovely ui Inspired UI - Mobile Apps Design Patterns [iPhone] Mobile Awesomeness Meerli · Featured Android Nic
Twitter、Facebook(アプリ)のデザインから学ぶ立体感のつけ方
TwitterやFacebookのデザインを良くみてみると、立体感のつけ方に一工夫あるのがわかります。（現在のデザインになってからだいぶ経っており、今更な感じですが…）その立体感のつけ方が洗練されていて良いなぁと思ったので、どのように作られているかをまとめてみました。 再現PSDデータをダウンロード ※アイコンは本物と異なっており、形の近いものを使っております。ご了承ください。 1. Twitter ヘッダーのアイコンやボタン部分を拡大し、つけられている効果を書き出してみました。 アイコンと文字（現在地表示） アイコンと文字（通常表示） ボタン これらを再現してみると、以下のようになります。 偽Twitterみたいな感じですねｗ それぞれにつけた効果の詳細は実際のファイルでご確認ください。 2. Facebook（アプリ） ヘッダーのアイコンやボタン部分を拡大し、つけられている効果を書き出
デザインの引き出しを増やそう！細部にまでこだわった美しいウェブUIエレメントのPSD素材のまとめ
細部まで作り込まれた美しいデザインのウェブ用のUIエレメントのPSD素材を紹介します。 そのまま制作に使ってもよし、インスピレーションをもらってもよし、PSDなのでエフェクトの勉強をしてもよし、などいろいろ活用できると思います。 ※一部のファイルはPNGフォーマットです。
ロゴの扱い方でプロとアマの差が出る。アイソレーションゾーンとレギュレーション・ビジュアルアイデンティティについて / Maka-Veli .com
Webサイトを眺めていると、よくロゴの扱い方が雑な物をよく見受けられます。どうもWebの場合はそれが多く見られる気がします。「印刷をしない」 からでしょうか？僕も当時、よく叱られてました・・・ アイソレーションゾーンとは アイソレーションゾーンとは、ロゴ等の周りにある『余白』の事です。 ロゴ周りでなくても、キャッチコピーやタイトルの周りに取ることが多いはずです。 タイトルやキャッチコピーなどの場合は、 ジャンプ率を高めに設定する場合は2~4倍くらいでも良いと思います。 逆にジャンプ率を低めに設定した、あまり強調を必要としない場合でも、 1つ分くらいは空けるとすっきりしますね。 スペースを上手く使える人はプロデザイナーっぽいですよね。 ホワイトスペースは「無駄」じゃありません。 隙間があるからといって、あれこれ詰め込むのはいかにも素人っぽいです。 ロゴレギュレーション 大
配色、デザイン、文章、写真、センスがないとあきらめる前に勉強しよう！｜Webpark
自分が作ったウェブサイトを見て、「センスないな」とへこむことはありませんか？ 私はよくあります。色使い、レイアウト、写真、文章などなど、どれをとってもセンスないなとへこんでいました。 けど、センスがないのではなく、単に基礎を勉強していないだけということに最近気づきました。センスはもっと高い次元の話でした。 ということで、センスを言い訳にしてしまいがちな分野の基礎を学べるすばらしい記事を集めました。この記事自体単なるまとめ記事ですが、できるだけ厳選し、読んでほしい順に並べました。皆さん、あきらめずに一緒に勉強しましょう。 配色 アクセントになる色を使うのが苦手で、同色系の色ばかり使ってしまうのですが、これらを読めば恐れずに使えそう。 色彩センスのいらない配色講座 ベースカラー、メインカラー、アクセントカラーに分類してどのような色を選ぶべきか分かりやすく解説してくれています。具体例もあって分か
非公開サイト
サイトの構築。作品の販売。ブログの投稿。この他にもさまざまな機能があります。 ログイン サイトをはじめよう 非公開サイト このサイトは現在プライベート設定になっています。
配色初心者でも効果的なカラーデザインが出来るようになる4つの工程 / Maka-Veli .com
タイトル間違えました。 「僕みたいなクソデザイナーが配色する時に騙し騙しデザインする手法」です。 配色には色々作法があります。そして言葉もあります。加法、減法、色の三属性、伝統、政治的意味合い、などなど。厳密に出したらキリがありませんし、プロじゃないので、細かい事は抜きにして、個人的に抑えておく簡単なポイントをまとめてみました。 雰囲気のキーワードを出す なんとなくのキーワードを出します。 カッコイイ！ うぉ！すっげ！って感じ クール とにかく渋く。鳥肌立つ感じで 可愛いっぽく。 やっぱ少し可愛くが良い ラブリー♡ もうワクワクーって感じで♥ シンプルに。 余計な物はいらん インパクトどーん とにかく覚えてもらいたい！ 爽やかーーー キレイに見せたい！ 楽しい！ ﾁｮｰﾊｯﾋﾟ ｽｰﾊﾟｰﾊｯﾋﾟ ﾉ…(ry など。 ここで決めたキーワードがベースになります。 常に頭に入れてお
リッチに見せるデザインテクニック。美しいぼかしで魅せる 『MAX 塗り』のすすめ。
こんにちは、イメージ担当の長谷川です。 今回は 1px にこだわったリッチな Web や UI デザインを更に立体的で奥行きのある雰囲気にする『MAX 塗り』を取り入れたグラフィック作成手法をご紹介します。 ところで『MAX 塗り』ってご存知ですか？ガンプラなどが好きな方はピンと来たと思いますが、プラモデルなどに興味がない人は全く分かりませんね。 『MAX 塗り』とはプラモデルに立体感を出すためにエッジから中央に向かってぼかしていく、昔からある「ぼかし塗り」や「グラデーション塗り」の技法です。 この技法で塗装されたプラモデルは単純に塗装したものより格段に迫力や存在感が上がります。プロモデラーの MAX 渡辺さんが良く使うプラモデルの塗装技術として通称『MAX 塗り』と呼ばれています。 Web や UI にこの『MAX 塗り』を取り入れる方法は簡単です。 作ったボタンや背景などのグラフィック
Google＋風のボタンUIセット＆ドロップダウン:phpspot開発日誌
Google Styled UI Buttons, Icon Buttons & Dropdown Menu Buttons Google＋風のボタンUIセット＆ドロップダウンの素材が入手できるサイトが公開されています。 まさにGoogle＋っぽい感じが出せるのとドロップダウンなんかもアイコン付きで綺麗に実装されています。 シンプルなデザインであるので普通にサイトで使ってもよさそうです。 アイコン付きのドロップダウンメニュー実装も。 ２００を超えるアイコン付きボタンセットも公開されています。 Firefox, Chrome, Safari, IE7+のブラウザサポート。 Creative Commons Attribution 3.0 Unported License.がライセンス 関連エントリ Google＋のフォトスタックを実現するjQuery＆CSS3のサンプル Google＋風の円
Photoshop VIP ☞ ボタンデザイン完全版、ダウンロードしておきたいPhotoshop無料PSD素材60個まとめ
Webデザインにおいてよく利用するデザインパーツのひとつ「ボタン」デザイン。 海外デザインブログWeb and Designersで、これまでに紹介したことのないPhotoshop用無料PSDボタン素材を60個まとめたエントリー「60 Outstanding Free PSD Buttons」が公開されていたので、今回はご紹介します。 多くの素材に色違いや大きさによって複数のボタン素材が収録されているので、ダウンロードしておくと便利かもしれません。 どれもPhotoshop用PSD素材を収録しているので、自由にボタンサイズ、テキストなどの変更も行うことができ便利ですよ。 詳細は以下から。 ダウンロードしておきたいPhotoshop用PSDボタン素材まとめ Follow Buttons 3色の異なる色でデザインされたボタンデザインセット、それぞれ通常時、ホバー時、アクティブ時の3種類ずつ用意
TwitterやFacebookの独自アイコンを作る場合に覚えておきたい「Picons」:phpspot開発日誌
Picons | Vector Icons and Pictograms TwitterやFacebookの独自アイコンを作る場合に覚えておきたい「Picons」 ベクター形式でロイヤリティフリーなので独自アイコン作成の際にはうってつけ。 デザイナーさんなら誰もが独自のアイコンを作りたいと思うのでこれをベースにするとよさそうです。 ６０種類のソーシャルアイコンが同梱 配布形式も色々で扱いやすいです。 アーカイブをDLすればそれぞれ収録されています 関連エントリ 選びたい放題のフリーのソーシャルアイコンセット色々 TwitterやFacebook等、フリーで使えるソーシャルメディアアイコンセット４０ シンプル白黒がいい感じのソーシャルアイコン37個セット「LinkDeck」 白黒シンプルがいい感じのベクター形式のソーシャルアイコンセット
スパムメールから収集したテキスト装飾 : mwSoft blog
先日、我が家の捨てアドを久々に開いたら、数千件のスパムメールが溜まっていることに気づいた。 オオアリクイみたいなセンスの良いスパムがないかなぁと思って軽く見てみたが、残念ながら良質な内容は見当たらなかった。 ただ、見ていると、テキスト装飾が凝ったものが多くて感心した。 仕事でも情報をテキストで残すことがあるけど、そんな時にちょっと見やすくするのに使えるのではないかと思って収集してみた。 ============================================================ ************************************************************ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ----------------------------------------------------
いまからでも遅くない！ ケータイデザインの基礎固め
いまからでも遅くない！ ケータイデザインの基礎固め：一撃デザインの種明かし（6）（1/2 ページ） 普段はPCサイトを作っているけど、ケータイサイトに興味が出始めた人向けの、初めてケータイのデザインハウツーです。日々変化するケータイデザインの基礎の基礎をご紹介 ケータイ機種のスペックが上がりデザイン表現の幅は広がっていますが、PCサイトに比べまだまだ容量やスタイル、キャリア対応などさまざまな制限があるのも確かです。 今回は、普段PCサイトを作っているけど、ケータイサイトに興味が出始めた人、初めてケータイのデザインに触れる人のための基礎固めとして、日々変化するケータイデザインの基礎の基礎をご紹介したいと思います。 誰でも最初は初心者だった！ ケータイデザインの基礎の基礎 ケータイの画面サイズを考える！ 一般的な画面サイズはQVGA（縦320px×横240px）ですが、最近ではQVGAワイド（
これは絶対覚えておいた方がよいシルエットの素材集:phpspot開発日誌
これは絶対覚えておいた方がよいシルエットの素材集。 85サイトのフリーかつハイクオリティなシルエット素材集が物凄い勢いでまとまっています。 覚えておくと色々な場面で使えることは間違いなさそう。 人型だけじゃなくて、動物や昆虫・植物などそろってます。 リンク先は以下のＵＲＬから参照してください 85 Free High Quality Silhouette Sets | Graphics
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Facebookページをアピール出来るソーシャルプラグイン・Likebox（いいね！ボックス）をオリジナルデザインに変更する方法 - かちびと.net
アニメ製作現場のお話
IDEA * IDEA
