今回はひたすら配色パターンを紹介していく。探しやすいように色ごとに分け、使いやすいように解説とWebコードも合わせて紹介する。プレゼン資料、Webデザインなどで目的に合った配色をそのままコピペして使って頂ければと思う。 ▼ 目次 カラフルな配色パターン 橙系の配色パターン 青系の配色パターン 緑系の配色パターン 黄色系の配色パターン 赤系の配色パターン 高級感を表現する配色 わび・さびを表現する和風配色 シンプルに格好良いグレーの配色 カラフルな配色パターン 1. 淡い「カラフル」 ■ #FF7D7D ■ #FFD580 ■ #B3E2B4 ■ #ABE7FF ■ #B8B2EA ■ #DBDBDB 淡いカラフルな配色は、白の背景に合わせると「透明感」を出すのに効果的。カラフル系の配色は扱いづらいので、上のコードをそのままコピペして使って頂くのが良いかと思う。 2. 力強い「カラフル」 ■

更新日: 2019年7月1日公開日: 2015年10月2日素人でもプロ並みの配色ができるデザインパターン参考サイト21選 Webデザインで大変重要な要素の一つ、配色。ベテランデザイナーでさえ一度配色に悩んでしまうと悪循環からなかなか抜け出せないときもあるほど 難しい世界です。その奥深さを象徴するかのように、Web上には配色に関するツール・サイトが数多く公開されています。 覚えておくとイザというときに役に立つ、無料のオンラインツール・サイトをご紹介します。 為になる鉄板「原色大辞典」 公式サイト 「色の名前とカラーコードが一目でわかる」サイト。原色、和色、洋色の名前とカラーコードの一覧、背景色と文字色の組み合わせツールなど色に関する情報が豊富に掲載されています。他にも気分に合わせて色を選ぶツールや電車の色の一覧など、遊べて学べるサイトです。 シーン別配色見本32パターン 公式サイト 株式会社

Webサイトをデザインするときの色選びは、そのサイトの印象を大きく左右するのでとても重要です。しかし、コーディングで指定できる色はおよそ1,670万色もあり、その膨大な数の色の中から適した色を選択することは難しく、悩むことが多いかと思います。色の組み合わせ方によってもまたイメージが変わってきます。 そこで今回は、色の持つイメージやWebサイトデザインにおける配色時のポイントなどをご紹介していきます。

2017年6月30日 色彩 配色によってそのデザインの印象は大きく変わると思います。色は大切な要素のひとつですね！ということで、色の持つ印象別に配色アイデアをずらりと並べてみます。配色はおなじみ（？）のCOLOURloversから、「これは！」と思うものを選ばせて頂きました。素敵な配色がいっぱいのこのサイト、ぜひ覗いてみてください！また、今回紹介するのはあくまで一例ですので、自分なりにアレンジしてみるのも楽しいと思います。サイトの雰囲気にあう配色を探してみてください。 ↑私が10年以上利用している会計ソフト！ 配色に関するおすすめサイト COLOURlovers 色をテーマにしたコミュニティサイト、COLOURlovers。自分の考えた配色を登録したり、お気に入りの配色を保存しておくことができます。今回はこちらから配色アイデアを選びました。iPhoneアプリは「ColorSchemer」と

デザインをする際に欠かせない要素の一つとして、カラーの配色がありますよね。しっくりこない、これであってるのかな？などで悩んだ経験は1度や2度はある事と思います。 今回はWEBサイトをデザインする際に必要な、ベースカラー、メインカラー、アクセントカラーの配色や配分についての基本ルールをまとめてみました。 3つのカラーとは？その比率とは？ WEBサイトの配色は役割別に３つあり、それぞれに、ベースカラー、メインカラー、アクセントカラーと呼びます。各々の比率をベースカラー70％、メインカラー25％、アクセントカラー5％の割合にすると、美しい配色に仕上げることができます。 ベースカラー 最も大きな面積を占める基本となる色で、余白や背景などに用いることが多い色です。メインとアクセントのカラーを引き立てる脇役的な立ち位置。 メインカラー その名の通りサイトの印象を決定づける主役の色です。 アクセントカラ

うまいデザインが作れるようになりたい！ 今よりも多くのデザインを任せてもらえるようになるためには、デザインの質を上げることが必要不可欠になってきます。 Webデザイン初心者さんや入社1年目の新人デザイナーさんへ、デザイン歴5年の私が今だから言える、新人デザイナーの時にやっていてよかったと思う一つのことをご紹介。 提案：1案を5案つくってみよう！ある日、社内で。 先輩デザイナー「スズキさん、この案件のトップのデザインを作ってみて？」 （本音：そろそろ練習がてら1案だけ作ってもらおうかな。僕も作るけど、よさそうなのできたら僕が少し手直しして3案中の1案に加えよう。） こう頼まれたら、普通は1案だけ持っていくと思います。ですが、新人スズキは、1案だけでなく2案、多いときは5案も作って先輩のところに持っていってました。 当時は「まだまだ未熟者だから、新人らしく、とにかくたくさん作ろう！！」と勢いで

1. マージンは整えられているか これは先輩に指摘されたランキングで堂々の1位を飾るほど、幾度となくミスを繰り返してきました。 特に焦っているときほど、「あとで調整すればいいや！」と後回しにしてしまい、結局忘れて提出してしまうことが多いです。非常に細かい部分ですが、ここをきちんと整えられるか否かでクオリティーに違いが出てくるので、自然と身につくまで繰り返しチェックしていきたい項目です＾＾ 特にボタンの中の文字は目立つので厳重注意です。 実践した改善方法 慣れないうちは、とりあえず測ってみましょう。 自分は「整列・分布」ツールで揃えたあとに、選択範囲ツールで測ってしまうことが多いですが、Photoshop CCからは配置のときにガイドが出てくれる便利な世の中になっています。 テキストの後ろの余分な箇所は、カーニングで削るとセンターに調整しやすいですよ＾＾　これは先輩デザイナーについ半年くらい

Webデザインの勉強を始めたばかりのころ、駆け出しで大変だったころ、きっとみんな１回はこう思ったことあるはず！と思って過去を振り返りつつ書いてみました。 というか今も変わらずあるような気もするけど、気にしないでおきます・・・。 ではどうぞ！ イラレ・フォトショを恨む 何時間もかけて作っていたデザインがパソコンの機嫌ひとつで落ちて、また途中（もしくは最初）からやり直し・・・。消えた瞬間は１０秒ぐらい時が止まりました。 今は自動保存機能や復元機能があるので、ほんと便利になりましたね。逆にいま勉強してる人たちは恨むこともないのかも・・・？ IEを心の底から恨む IE（インターネットエクスプローラ）って元祖ブラウザ、ブラウザの中のブラウザ、みたいな立ち位置なのにどうしてIEだけ対応してないの？なんで表示が崩れるの？っていまだに思います。 古いバージョンのIEは早く蒸発してほしい・・・（できるだけ空

（7月25日、コーディング編更新しました。） 私がWebのスキルアップのために行っている勉強方法をすべてご紹介します。 たくさんありますが、「今日は模写をしてみよう」とか、「今日は案出ししてみよう」とか、楽しんで勉強するのが一番だと思います。 今まで自分に合っているものを優先して取り入れてきましたが、「もっと効率いい方法があるよ！」というアイデアがあれば、ぜひ教えていただきたいです！ デザイン編 忙しくてもできること 毎日5分でもデザインを観察する ニュースを見る、読む いいと感じたデザインを自分なりに消化してから制作に取り入れる 部分的でもいいので2案以上作る 周りの人に自分から意見をいただきにいく 意見をいただいたら要点を控えておく 提出する時には自分の言葉での説明も添える 広告を見て、伝えたい内容や狙いを考察する 時間あるときにしたいこと 思い浮かんだ案をできるだけ作ってみる 素敵だ

Help us understand the problem. What are the problem?

TL;DR Vue.jsを使ってドラクエ風ポートフォリオを作りました できあがったものがこちら GitHubはこちら ← New ドラクエ風ポートフォリオサイトが一応できた。（レスポンシブ未対応） なおポートフォリオの役目を果たしているかは不明なので、正しくは 「ドラクエ風ポートフォリオ風サイト」https://t.co/atlgBcB9B0 #ポートフォリオ#ドラクエ pic.twitter.com/yJ45hZGH7c — iwathi (@iwathi) November 8, 2018 あらすじ 前からポートフォリオを作ろうと思っていたのですが、普通に作るだけでは芸がないかと思い、「ドラクエ風RPG」をイメージして作っています。 フロントエンドの実務経験がないので、実装期間は10日間（約2時間/日）ほどでした。 できたもの ドラクエ風ポートフォリオ ちょっと触っていただければ分かる

こんにちは、プロダクト開発チーム エンジニアの森永です。 以前の記事「モバイルファーストの時代。スマートフォン用ブラウザは2017年以降どうなる？」でも書きましたように、Webサイトの作成においてはモバイル用サイトを重視する傾向が強まってきております。 スマートフォン用ブラウザの機能もPC用ブラウザと比べて遜色ないレベルに近づいてきており、画面サイズに気をつければHTMLやCSSのコーディングは同じ感覚で出来るようになってきています。 しかしながら、PCで確認すると問題ないのにスマートフォンで見ると想定していた表示と異なっていたり画面が崩れていたりすることもまだしばしば発生することが現実問題として多々あります。 今回は、iPhone でCSSコーディングを行って実際に発生した3つの事例、およびその対応策について紹介いたします。 入力フォームなどのボタンが PCや Android スマートフ