デザイン原則の実践｜dely designThis domain may be for sale!
デザインの基本日記 「配色編」｜Design Beginner
配色がうまくいかない場合の多くはたくさんの色をついつい使ってしまった結果招いていることが多い。まずは2色で配色をしてその上で少しずつ色の調整をすることによって、まとまりのあるデザインが作りやすくなる。 一般的に言われている配色は、ベースカラー7割、メインカラー2割、アクセントカラー1割。一番表現したいことをアクセントカラーにすることで表現したいことが何かはっきりわかりやすくなる。 なんとなく落ち着いていて物足りない場合、色相環で反対の色をアクセントカラーに持ってくるとインパクトがでる。この色相環の反対の色を反対色や補色といったりもする。 逆にガチャガチャして色がうるさい場合は、色相環の隣り合った色数色を選び配色することで全体的にまとまった印象になる。この色相環の近くにいる色のことを近似色と呼ぶ。 配色を決める場合、いくつかの軸があるが、何を表現しなければいけないかというテーマによって配色を
これぞプロのデザインテクニック！UIデザインの印象がよくなるデザインの知識とテクニックのまとめ
Webサイトやスマホアプリをデザインする際に、カラー・タイポグラフィ・レイアウトなどはどのようにすればうまくいくのか、ユーザーインターフェイスのデザインが一手間加えるだけでよくなるデザインの知識とテクニックを紹介します。 10 cheat codes for designing User Interfaces 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. テキストは重要、より大きく！ 2. 複数のブラックを作成しない 3. カラーを理解するためには数学が大切 4. 空白スペースを活用してグループ分け 5. カラーを使用して行を区切る 6. ドロップシャドウの代わりに乗算を使う 7. 一行の長さ 8. 新しいデザインに執着しない 9. ブランドカラーをアクセントとして使用する 10. リストにおけるビュレットのデザイン 1
Googleのデザイナーなどのポートフォリオを300件以上閲覧できるサイト Bestfolios - LOGzeudon
海外のデザイナーのポートフォリオを見るのに便利なサイトの紹介です。 Bestfolios - UI/UX Design Portfolio Inspiration and Showcase ポートフォリオだけでなく、次の４カテゴリで情報がまとめられています。 Portfolios（ポートフォリオ） Resumes（履歴書） Resources（デザイン素材） Articles（投稿記事） オススメなページ順に、簡単に内容を紹介します。 Articles（投稿記事） ポートフォリオに関連した記事が読めます。 今のところ４記事しかありませんが、いずれもタイトルの魔力がすごい。 Google Designer Portfolio Collection 1 Facebook Product Designer Portfolio Collection 1 10 great fonts you may
グロースとは学びを得ること - 後編｜Go Ando / PREDUCTS / THE GUILD
こんにちは、THE GUILDの@goandoです。 「グロースとは学びを得ること - 前編」の続きです。 後編ではグロースにおけるABテストの価値について、グロースに取り組む中で得た気付きと世界の動向をご紹介します。 正しいABテスト多くの方がご存知のABテストですが、時折見かけるのが「改善案Aと改善案Bの方法のどちらがより良い結果に繋がるかを検証」するための方法として利用し、更には全てのユーザーをランダムに50% vs 50%にスプリットして行っているケースです。 これは正しいABテストの利用方法ではなく、本来は「現在の仕様A(対照群)に対し別の仕様B(介入群)の結果を比較」する実験方法で、仕様Bのみを特定の条件でランダムに抽出した一部の対象に対してのみ行い、元の状態との比較を行うのが本来の活用方法です。 ABテストは統計学や疫学の歴史の中で成り立ったランダム化比較試験の方法に基いてお
大規模サイトにおける Googleアナリティクス導入から成果まで - MOL
ありがたくも、CSS Nite LP, Disk 19「アクセス解析」で話した「大規模サイトにおけるGoogleアナリティクス導入から成果まで〜Webデザイナーがアクセス解析に携わってみて〜」が 、CSS Niteベストセッション2011 のベスト20に選ばれたので、文字に起こしてみるの巻。 DMM.com Laboの石本です。よろしくお願いします。今日は大規模サイトでのGoogleアナリティクス運用について話します。そんなに難しいことではないので、リラックスして読んでもらえれば幸いです。 アジェンダ 本日の流れはこんな感じでやっていきます。 自己紹介 アクセス解析への動機 プロファイルの適正化 コンバージョン設定から改善施策へ まとめと今後の課題 自己紹介 では、やっていきましょう。まずは自己紹介させてください。Twitter IDは@t32kでWebデザイナーをしています。 2011/
これぞレスポンシブ確認ツールの決定版！OSを選ばずにウェブサイトをすぐに確認できる -Viewport resizer
ウェブページの表示サイズをデスクトップやスマフォ・タブレット用に変えてレスポンシブの確認をするツールはたくさんありますが、これはかなりおススメのツールです。 Viewport resizer Viewport resizerの特徴 Viewport resizerの使い方 Viewport resizerの高度な使い方 Viewport resizerの特徴 Viewport resizerはブラウザベースで動作するブックマークレットで、WindowsでもMac OSでも即時にツールを起動して、表示しているウェブサイトをあらゆるサイズに変更して確認できます。 フルカスタマイズが可能。 その場でサイズ変更してのカスタマイズも可能。 1クリックでスマフォやタブレットの縦・横向きを変更できます。 Media Queriesをサポート。 Metaのviewportタグを適合させます。 ページのリロ
クリック率・コンバージョン率を高めるボタン。3つの大きなポイント
WEBサイトを運営していれば、サイトに訪れてくれたユーザーに【申し込み】【購入】【資料請求】【問い合わせ】などのアクションを、たくさん起こして欲しいと考えると思います。 そのためWebクリエイターは、どうしたらコンバージョン率や数が高まるのかを日々考え・テストを繰り返しています。 私もそのことを考えている1人として、今回はサイトの目的を達成させるために欠かすことのできない大変重要な要素の1つである【行動を呼びかけるためのボタン（Call to Action Button）】についての考えをまとめたいと思います。 目的を達成へと導くボタン ボタンはホームページの最終的な目的である【申し込み】【購入】【資料請求】【問い合わせ】などのアクションを、ユーザーに起こしてもらうためには欠かせない要素の1つです。ボタンのデザインやボタン内の文章を変えただけで、資料請求が増えたなんていう事例はたくさん存在
延べ1,198事例！Facebookウェルカムページの「デザイン」に悩んだら見るべき7サイト＋6記事 « 株式会社ガイアックス
a]:flex [&>a]:flex-row [&>a]:justify-between [&>a]:py-[18px] [&>a]:border-t [&>a]:border-lightgray [&>a]:border-opacity-20 [&_li]:my-1 [&_li]:list-['-_'] [&_li]:py-[18px] [&_li]:border-t [&_li]:border-lightgray [&_li]:border-opacity-20 [&_.Label]:transition-all [&_.Label]:w-fit [&_.content]:transition-all [&_.content]:h-0 [&_.content]:pt-0 [&_.content]:px-5 [&_.content]:overflow-hidden [&_.toggle:
iPhoneデザインアーカイブ
【初めての方はこちらをクリック】 iPhoneデザインアーカイブは、携帯サイトキャプチャ集「モバイルデザインアーカイブ」の姉妹サイトです。 iPhoneサイトを制作する上で参考になる秀逸なデザインを持つサイトのキャプチャを集めています。 iPhoneサイト制作を請け負ったけど、「なかなかデザインがまとまらない」「洗練されたデザインを参考にしたい」といった方のために、 優れたiPhoneサイトのデザインを集めました。また、iPhoneサイトにまだ手を出されていないモバイルデザイナーの方に、iPhone サイトデザインの雰囲気を掴んでいただくことで、「今後の仕事の幅を広げるきっかけになれば・・」、という思いで立ち上げました。 デザインに優れたiPhoneサイトはもちろん、技術的に優れたiPhoneサイト、そして現在のトレンドを捉えたiPhoneサイトを掲載しています。 なお、意識的にiPhon
採用Facebookページ制作時の注意点まとめ | 求人広告代理店のリクエストエージェント
ソーシャルリクルーティングが話題になり、Facebookを活用して、新卒採用・中途採用をする企業も増えてきました。Facebookページは「採用」という目的は同じなのに、企業によってページの見せ方、コピーのつけ方、応募の流れがそれぞれ異なります。 Facebookページは自由にページを作成できるので、募集ページも企業文化をアピールする大事な場所です。今回は国内企業の運用事例を紹介しながら、Facebookページで求人募集をするにあたって、制作時に注意しなければいけない項目をまとめました。 採用Facebookページ運用の基礎知識 Facebookページを使って採用募集をするにあたって、知っておくべきFacebookページ運用の基礎知識をまとめました。 ページURLは「いいね！」が25人以上で変更可能！ Facebookページを作成すると、自動的にURLが割り当てられます。このURLは数字を
デザインで訴えかけるFacebookページ | ブログ | SINAP - 株式会社シナップ
こんにちは、守谷です。 各地でのデモのニュースを初め、最近耳にしない日のなくなってきた Facebook ですが、企業やアーティスト等が活用できるFacebookでの顧客へのアプローチ方法として「Facebookページ」があります。 以前から、このSINAPlogでも企業のFacebookページの活用法に注目しており何例かフィーチャーしてきましたが、今回は見せ方によっても訴求力が変わるFacebookページの表現をデザイナー目線でピックアップしていきます。 ちなみに、こちらの見出し画像でキャプチャさせていただいたのは、Red Bull のFacebookページの一部です。明らかに「いいね！」ボタンを押させようとしている画像が画期的で、この表現からインスピレーションを得た企業も多かったのではないでしょうか。 以下に近い表現のものをピックアップしました。 （ANA、テラモーターズ、Google
Webデザイナー（私）によるタイポグラフィーレイアウトの注意書き
私は DTP デザインが苦手です ...。でもときどきお客さんから、フライヤーとかポスター、名刺なんかの紙のデザインを頼まれます...。そこでもっと勉強しなくちゃいけないなーと感じていたのが、タイポグラフィーについてのこと。今回はタイポグラフィーとそのレイアウトについて学んだことをまとめてみました。 以前グラフィックデザインをしている先輩に、グリッドシステムや揃えるだけがデザインじゃないし、もっとタイポグラフィーやレイアウトのことを勉強しなさいと言われました …。私は普段、Webデザインしかしていないんですけど、ときどきフライヤーやポスターのデザインを、ついで仕事のような形で頼まれる事があります …。 でも、Webデザインしかしてこなかった私は、紙媒体 – DTP デザインが苦手です …。ちょうど 1年くらい前にも同じような記事、Webデザイナー（私）によるDTPデザイン注意書き：Webと
カラー別、デザインが素晴らしいウェブサイトのまとめ
カラー別にデザインが素晴らしいウェブサイトのまとめを紹介します。 Web Design: Nice and Clean Layouts ホワイトをベースにしたウェブデザインのまとめ キャプチャ：Stu
「素人っぽいデザイン」から抜け出すために、デザイン制作時に心がけたい5つのポイント
☆ご注意☆ この記事は 2011年5月29日 に書いたものです。情報が古い可能性がありますのでご注意ください。 今も素人にちょびっっっとだけ毛が生えた程度ですが、 少しだけわかるようになりました。 毛の生えた私からツルツルの私へのダメだし Webデザイナーなりたてのころ、デザインのチェックをしてもらったとき、 「んーーーなんかこのへん素人っぽいね」と言われた事があります。 素人っぽい。。。？？？(゜д゜) そのときは何だろう、どんなのが素人っぽいんだろうとわかりませんでした。 就職はできたものの、技術は完全ど素人なので。 今も素人にちょびっっっとだけ毛が生えた程度ですが、 少しだけわかるようになりました。 「素人っぽい」の意味が。 毎日、たっくさんのWebサイトを見ますが、プロのデザイナーが作ったと思われる、構成もデザインもしっかりしたサイトもあれば、お店の人が一生懸命手作りしてそうなサイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
海外向けサイトに適したデザインとは？ 外国人が好むフォントや色彩感覚 | 一人でできるWebサイト収益UP術－ウェブ解析士事例集
国内のレスポンシブWebデザインに対応したWebサイト
Facebookページリンク集 ソーシャルブックマーク 520PX facebookmark
洗練されたデザインのPSD素材が無料でダウンロードできるサイトのまとめ
ファーストビューは何pxまで？ ブラウザの表示領域サイズ5年間の変化を大公開 | 初代編集長ブログ―安田英久
