ノンデザイナー必見！ 絶対に見ておきたいデザインスキルアップできる記事12選 - ICS MEDIA
弊社のスタッフはフロントエンドの開発にとどまらず、デザインを制作する機会も少なくありません。弊社に限らず、近年職種を問わずデザインを扱う機会が増えているように思います。しかし、コンテンツ要素が整理整列されていなかったりテキストのカーニングがされていなかったりと、基礎的なことができていないようなケースも多く見られます。基礎的な部分が押さえられていないと、野暮ったさや素人感が出てしまいイマイチな仕上がりになってしまいます。 今回はそういった方に是非読んでもらいたい記事を、すぐにでも実践できる内容を中心にピックアップしました。Webサイトやアプリケーションのデザインだけでなく、企画書やプレゼンテーション資料の作成などでも応用できるものなので、どなたでも覚えておいて損はないと思います。 フォント選び フォントの基本的な選び方 | Arch ▲フォントの系統から書体、ウェイトの選定方法まで、ユーザー
フラットデザイン： 起源、問題、フラット2.0のほうが望ましい理由
フラットデザインとは2012年ごろに広まったWebデザインのスタイルである。それは広く今も利用されているが、過度な利用は深刻なユーザビリティ上の問題を引き起こしかねない。フラットデザインによって発生するユーザビリティ上の最大の課題の1つに、クリック可能な要素のシグニファイア不足がある。フラットデザイン2.0は、それに対する優れた解決策を提供してくれる可能性がある。 Flat Design: Its Origins, Its Problems, and Why Flat 2.0 Is Better for Users by Kate Meyer on September 27, 2015 日本語版2015年11月2日公開 フラットデザインは人気のあるデザインスタイルで、Webページのグラフィック要素に、光沢感や立体感という視覚効果を利用しないもののことである。それは多くのデザイナーからWeb
UX・UI・IAやアクセシビリティの「専門知識」が増えるまとめ - コムテブログ
TL;DR コーディングやシステムは分かるけど、最終的に使いやすい設計やクライアントさんが納得するようなデザインにならない。納品後に使いにくい箇所があると言われる。そうなる前に「何となく進めない」ようにサイト制作やサービス・アプリを作成する前の段階で知っておきたい知識。UX・UI・IA の違いが漠然としているときに。 IA（情報アーキテクチャ） １．基礎知識 情報アーキテクチャとは Web サイト全体の設計図、情報を分かりやすく伝えること。主にＩＡ（インフォメーションアーキテクト）が担当します。国内ではディレクターが担当する会社も多いと思います。情報アーキテクチャはサイトを見た目の印象だけでなく、目に見えないサイト構造をデザインすることで、わかりやすいサイトにする技術。 [スライド] 社内の IA（情報アーキテクチャ）研修の講師をしてみた。：そのフォローアップ | future-proof
H1一つでここまで出来るCSS見出しデザインのアイデア9個 / SQUEEZE - Web Design Studio -
HTMLはh1要素だけで、CSSの「border」や「box-shadow」「transform」「linear-gradient」、擬似要素の「:before」や「:after」を使った見出しデザインをご紹介します。まずはサンプルをご覧ください。 サンプルページ » 01.切り取り線 紙を切り取ったようなデザインです。 サンプルとソースを見る » ポイント垂直方向の影のオフセット距離を設定しただけでは、左右両脇にも影ができてしまうので、一旦5px下に影をオフセットしたうえで、広がり距離を負の値(-4px)にし縮小することで、上部の影のみを残しています。 border-top:1px dashed #aaa; border-bottom:1px dashed #aaa; background:#eee; text-shadow:1px 1px 0 rgba(255,255,255,1);
UIデザインの参考になるサイトまとめ | ナナメウエblog
毎日仕事中と寝る前にチェックしてるUIの参考になるサイトをまとめました。 もう、見ているだけで涎が出ますね。 Dribbble – Following もはや知らない人はいないでしょう。世界中からハイレベルなデザインが集まるこのサイト。3時間に1回は見てます。 JAYPEG 日本版Dribbbleというとわかりやすいかもしれません。昨年末にできたばかりですが、すごく好きです。投稿しまくってます。自分で作ったUIを素材として公開してたりします。1時間に1回は見てます。 Inspired UI – mobile ui patterns カテゴリーが細かく分かれていて非常に嬉しいです。数も豊富で見やすいサイトです。 iOS Mobile Patterns カテゴリーがわかりやすく、マウスが拡大鏡になるので細部まで見ることができます。 iPad and iPhone Design Ins
名刺に心理学的な効果を反映させるデザインのポイントまとめ
By Michael Kappel 名刺と一口にいってもそのデザインは千差万別。似たような「白地に黒文字」の名刺であっても、縦書きか横書きかというだけでもイメージは変わってきます。心理学的な見地から、名刺をデザインするときにどうすれば効果的なのかということを、Uprinting blogがまとめています。 The Psychology of Business Cards | UPrinting Blog http://blog.uprinting.com/the-psychology-of-business-cards/ ◆フォントの選択 一般的な文章(英文)だと、タイトルや見出しにはsans-serif(サンセリフ)のフォントが、本文にはserif(セリフ)のフォントが使われます。serifとは文字の端にある小さな飾りのことで、sans-serifにはその飾りがありません。では、名刺の場
ベクター素材のフリーダウンロードサイト8選【Freepikだけじゃない！】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのハルエです。 イラストやパーツ、背景など、素材の作りこみが必要なときにフリーのベクター素材ってものすごく重宝しますよね。そのまま使うこともできますが、そこから自分なりのテイストに変えてデザインしちゃえばより良いものができるはず！ 時間がないときなどにも凄く助かります。 今回は、高品質なベクター素材が無料でダウンロードできる厳選した8サイトをご紹介させていただきます。 独学でつまずいていませんか？ Webデザインの基礎を効率的に学びたい、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGではWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。 詳細を知りたい方は、ぜひスクールの詳細をチェックしてみてください！ →スクールの魅力が分かる資料はこちら！（資料請求） 高品質なベクター素材の無料ダウン
「第一回 プログラマ向けデザイン勉強会」の内容を参考にして妻のパン屋のWebサイトをリニューアルしてみた - give IT a try
はじめに みなさん、明けましておめでとうございます！・・・と言うにはあまりにも遅すぎる時期になって2013年最初のブログ更新となりました。 「そろそろブログ書かなきゃ書かなきゃ〜！」と思っていたのですが、年末から妻のパン屋のWebサイトのリニューアルに没頭してしまい、間が空いてしまいました。 せっかくなので、2013年最初のエントリではそのお話をしたいと思います。 「第一回 プログラマ向けデザイン勉強会」の発表資料が素晴らしい！ 前々から妻からは「Webサイトのデザインをリニューアルしてほしい」と言われていたのですが、僕自身はあまりデザイン方面には強くないプログラマなので、どうしようかと困っていました。 そんなとき、ネットで見つけたのが「第一回 プログラマ向けデザイン勉強会」でした。 東京の勉強会なので、僕は参加できませんでしたが、発表者の方々のわかりやすいスライドが公開されていたので、だ
東京Ruby会議10で、Rubyistのためのデザイン講座ワークショップやらせていただきました #p4d #tkrk10 - 納豆には卵を入れる派です。
#p4d Rubyistのためのデザイン講座 12:30 - 13:30 発表1: @machida さん / 「RailsエンジニアのためのTwitter Bootstrapカスタマイズ例」 13:50 - 14:50 発表2: @ken_c_lo さん / 「少ない手間と知識で "それなり" に見せる、ズルいデザインテクニック」 15:10 - 16:10 発表3: @saucerjp さん / 「ノンデザイナーのための配色理論」 16:30 - 17:45 実習: オトナの塗り絵で学ぶデザイン 発表内容は、前回の「第一回 プログラマ向けデザイン勉強会 #design4p」の再演で、前回1画面に詰めすぎて喋りにくかったという反省から、きちんとスライドを分割して臨もう…と思っていたのですが、前の晩にさあ作業をしようと思ったらいつの間にか寝てしまい当日の朝になっていたという失態をやらかし、
色選びでもう迷わない！配色の定石パターン | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
最近、チャリを手に入れた。しかも、新品のやつだ。前にかごもついてて、後ろに荷台もついてる！さらに鍵もついてる至れり尽くせりな優れものだが、どういうわけかチリンチリンがついてないんだ！なんでついてないんだチリンチリン！必要だろチリンチリン！人ごみとかこう、かきわけ、あ、どうも、僕です。 今日は色選びで迷わないための配色の定石パターンについて書こうと思うよ！ その前に色の表現方法の基礎知識についてちょっと勉強しようね！ 色の表現方法 色とは、可視光線の波長の違いによって、 人間の目に存在する細胞が反応し、 脳に伝わって認知する現象のことを言うわけですが、 まあ、そんなめんどいことはおいといて、 色とは「赤」とか「青」とか「緑」とかそういうもののことをいうわけですな。 ちなみに色を識別する細胞は目の中心部分に集中してて、 視野の外周部分の色って実は実際には見えてなくて、 脳が視界を認知する際に補
味気ないウェブデザインに動きを加えて魅力的にする5つのデザインテクニック
Techniques for Creating Motion in Web Design 下記は各ポイントを意訳したものです。 魅力的なウェブページをつくるポイントはモーション モーションを生み出す4つの方法 1. 構成 2. フレームと配置 3. 編集 4. エフェクト 5. テキスト 魅力的なウェブページをつくるポイントはモーション 誰もが魅力的なウェブページを作ることを望みます、そのゴールを達成する最も効果的な手段は「Motion: 動き」を加えることです。これはビデオやアニメーションだけのことではありません、素晴らしいデザイナーはビデオやアニメーション無しで「Motion: 動き」を生み出すことができます。もちろん、ビデオやアニメーションが効果的な手段ではない、ということではありません。 ここでは、ビデオやアニメーションを使用しないで、ウェブページを魅力的にする「Motion: 動
コードの知識が無くてもパワポ感覚でサイト作成できる無料・有料サービス14選 | A!@attrip
最近のウェブサービスの進化は速いもので、htmlやCSSなどのコードが書けなくても、絵が描ければサイトを作成できるようになってきています。 そこで今回は、コードの知識が無くても、マウスでサイトデザイン・レイアウトできる無料・有料サービスを集めてみました。 PC向けサイト作成用 1. Wix ドラッグ＆ドロップで、デザイン・レイアウトが自由自在にできる。おしゃれなテーマテンプレートも充実している。html5で作成されるのも特長。 デザイナー＆コーダーいらなくなるかも？！ウェブツール『WiX』 | A!@attrip 2. Google サイト Googleのサイト作成サービス。まるでWordのような使い心地。 テーマのおしゃれ度と充実度はまあまあかなぁ。 3. Scroll Kit 下へスクロールするランディングページ作成などに便利。絵まで描けてしまうほど自由度高い。 html解らなくてもサ
配色でブランドが決定する
First impression : 人はWebサイトを見た瞬間に印象を決めている Webサイトを作成する際に、配色はなぜ重要なのでしょうか。はじめに下記Webサイトの配色を見てください。配色のみで、何かのブランドを想像できるでしょうか？ 上記のサイトは日本コカ・コーラ社のサイトです。この配色だけを見て何かしらのブランドが想像ができたならば、あなたは色を見てブランドのイメージを決めたということになります。それは、文章を1文字も読まず、配色だけで印象を決めたということですね。他にも、赤と白で配色されたブランドのロゴには以下のようなものがあります。 私たちは普段、新しいWebサイトを見た瞬間に「〇〇っぽいサイトだな」とか「〇〇系だな」など無意識にそのサイトを何かのカテゴリーに当てはめ、イメージを作っているのです。その全体的なイメージは色によるものです。 カナダのカールトン大学で行われた研究のレ
Webデザインの参考に！おすすめのギャラリーサイト・リンク集まとめ
※この記事は、2013年1月30日に公開された記事を再編集したものです。 何かで立ち止まったり、行き詰まったりした時は「驚き」や「新しいアイデア」を得た時に、急に閃いて解決することがあります。 今回は、Webデザイナーである私が、普段から巡回しているインスピレーションを得られるおしゃれなWebサイトがのっているギャラリーサイトを集めてみました。 アイデアの参考にだけでなくチームやクライアントとのイメージ共有にもギャラリーサイトを活用することで、より円滑にコミュニケーションがとれたりします。 気に入ったギャラリーサイトがあれば、ブックマークしておきましょう！ ※できるだけ直近でも更新されているギャラリーサイトのみピックアップしていますが、もし更新がとまっているサイトがあればご了承ください。 Web Design Clip | Webデザインクリップ 国内がメインで掲載されています。 特徴的な
見てるだけで楽しい！ オシャレな不動産屋のWebサイト10選
こんにちは。 今日は、見ているだけで満足しちゃいそうな、そんなオシャレでステキな不動産サイトを集めてみました。 新しい住居の形を提案してたりするので、見ているだけで勉強になります。 おしゃれなリノベーション物件やデザイナーズマンションなど、一度は住んでみたいと思ってしまいますよね！ ただただサイトをみながら妄想するのもよし、これから新生活を始める人や引越しを考えている人は真剣に探しまくるのもよし。 とにかく一度みてほしい不動産サイトをピックアップしました！ REISMリノベーション物件 リノベーションしたマンションを通して自分らしさを表現する、ということをコンセプトにしている不動産サイトです。 主に東京都内の築が古めの物件を、大胆に、そしておしゃれにリノベーションした部屋を探すことができます、 http://www.re-ism.jp/ 京都トンガリエステート 選ぶを楽しむ! 不動産サイト
色カラー | 色彩とデザインのホームページ
色と色が組み合わさることによって様々な変化が起きます。また、色と何かが組み合わさると新たな出会いや発見が生まれます。色カラーは色と関わりのある情報をお届けするサイトです。色の組み合わせを楽しみましょう。 今のオススメ 配色検索！キーワードから作る配色 季節の色彩！3月のイメージ配色 季節で変わる好きな色と嫌いな色 この色が好きな人はこの色が嫌い 男性と女性で異なる色彩嗜好 迷いを解決！効率的な色の選び方 カラー講座 色の知識を広げよう！色の影響力の考察 色カラーで学ぶ色彩のこと。何気ない日常に変化を与えてくれるのが色です。色が持っている性格や色の印象が与える影響などを知っていると、日々が楽しくなります。 色彩感覚：色と心の関係 いま笑顔は何色に見えますか？ 色のイメージは経験や体調、性格、天気、流行、文化など様々な要因によって左右されます。また、同じ色でもその時々によって感じる感覚は違って
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
UIデザインについて改めてしっかりと学ぶために参考になるスライドまとめ
2013年のウェブデザインのトレンドを探るかっこいいUIデザインのまとめ
//// COLOURlovers :: loving colours since 1981