配色に自信がなくても！Webデザインが好きになる配色ツールと使い方
2016年12月13日 Webデザイン, 便利ツール, 色彩 以前書いた記事「配色パターンからWebデザインを考える」を見た方から「いい配色だなーと思ってもうまく使いこなせない」という意見をいくつか頂きました。確かにすてきな配色をどうデザインに取り込んでいいのか、というのは難しいところです。今回は簡単に配色を提案してくれるオンラインツール「ウェブ配色ツール Ver2.0」を使って配色をWebデザインに取り込む方法を紹介します。 ↑私が10年以上利用している会計ソフト！ ウェブ配色ツールを使った基本的な配色方法 まずこの「ウェブ配色ツール Ver2.0」について。テーマカラーを一色選べば、それにあった配色を提案してくれる配色ツールです。Webサイトのプレビューを見ながら配色の調整ができるので、初心者さんにもおすすめです！ オレンジを元に色相差0°で配色した例。色相差を0°にすると同系色（＝同
Webデザイナーなら忘れちゃいけない一つ。ディスプレイ（モニター）の発色について。 | Maka-veli.com
Webデザイナーなら忘れちゃいけない一つ。ディスプレイ（モニター）の発色について。 On 2011年7月1日, In Creative, Design, by maka-veli.com 画像のカラーマネジメント設定とか、紙質による色の違いとか、セーフモードとかの話しではなく、単純に「モニターの発色」についてのお話。 けっこう舐められません。僕もしょっちゅうやらかします。 このブログでも、モニター変えて見ると全然印象が変わるので時々焦ります。。 今もきっとどこかに変な部分があるでしょう・・・ モニターの違いによる問題 モニターを変えると、 見えていないものが見えちゃうことが多々あります。 特にPhotoShop等で画像を編集していると起きやすいです。 ベクターなどは領域がはっきりしているのでイラレなどでデザインしている場合は少ないかもしれません。 PhotoShop等で画像を
ミニマル、シンプル、ダイナミック…。 すっきりしたホワイトスペースの使い方が上手い国内サイト30個 / Maka-Veli .com
前回の記事で少し語弊があったようなので、国内リスペクト記事です。 画像クリックで拡大。サイトへのリンクはURLよりどうぞ※同一ウィンドウ http://blite-design.com/ http://www.kazurasei.co.jp/ http://www.yu-nakagawa.co.jp/ http://momochisoap.com/ http://yamamototakashi.jp/ http://amodel.jp/ http://www.kohchosai.co.jp/ http://jitto.jp/#/ http://giraffe-tie.com/ http://www.arisakadesign.com/ http://www.kioyoneda.com/ http://g-u-k.jp/ http://qiuto.jp/ http://www.bisyo
ドロップシャドウって色んな種類あるんで、PSD作ってみました。もちろんフリー・商用可。ダウンロードしてっちゃって下さい。 / Maka-Veli .com
色んなサイト見てると、本当色んなドロップシャドウかけてるんで、じゃあどういうのが見てて気持ちいいかなーと思って色々とやってみました。 サンプル作ったは良いけど持っててもアレなんで、PSDをZipで固めて置いておきます。 お好きにどうぞ。※PSDダウンロードは最下部にあります。 普通のドロップシャドウ。 普通ですね。ほんと、普通です。 両端めくれ上がってる系。 よく見られますよね。紙なんかの表現の際はけっこうリアルに見えますよね。 より、めくれちゃってる系。 もう少し立体感を出したタイプですね。照明が強めなイメージ。 使い所が意外に難しい。 真ん中が浮き上がってる系。 うちのトップページでも使ってます。 個人的にはセンター合わせの際にバランス取りやすいかなーと思って。 なぜか浮いてる系。 平面で、なぜか浮いてる感じ。 あんまり好きじゃないかも・・・ くっきりシ
まるでおとぎ話の世界みたい!かわいくてガーリーな21サイトをご紹介
こんにちは。可愛いサイト大好き。 可愛い女の子はもっと好きな井畑です。 そんな井畑ですが、 ブックマークしていたお気に入りの可愛いサイトが増えてきたので、 今回ここでご紹介したいと思います。 僕の個人的な趣味が含まれますので、 「こんなのガーリーでもなんでもねーよｗｗ」とか、 twitterやはてぶで話題になったもので、既に知ってるものなども多くあるかと思いますが、ご了承くださいませ。 それではどうぞー!! Peter Granfors Peter Granfors まずは海外のサイトをご紹介していきます。 フィンランドのグラフィックデザイナーさんのポートフォリオサイト。 クリーム色のベースにピンク･ブラウン･紫のテクスチャーとイラストが繊細でとても可愛いサイトです。動物のモチーフも印象的で、タイトル部分のフラミンゴは勿論、フッターのお猿さんにも注目です。 me & oli me & ol
ここまで教えてくれていいの？！WEB屋のテンションと底力を上げる厳選チュートリアル色々！ | バンクーバーのうぇぶ屋
WEB制作のチュートリアルって本当に多いですよね。 でも、本当に役に立っている、制作に生かせてるチュートリアルって少なくないですか？チュートリアルの過程が中途半端だったり、途中からついていけなくなったり。はたまた、続きは有料なんて物も今までありました。 しかし！僕の短いWEB屋人生ですが、年に2、3は『お、おぉぉ！マジテンション上がるWA！』と叫びたくなるチュートリアルに出会うことが稀にあります。そんな感銘を受けたチュートリアルは速攻でFacebookにアップしているのですが、今回は今日まで見てきた中で、余りにクオリティが高かったり、確実に自分や周りのスキル、そしてテンションを上げたチュートリアルを厳選してご紹介！ 英語記事メインですが、デザインよりならステップbyステップなのでなんとかなります！コードなら、Demoとか多いので見ながらついていけば理解できます！是非参考までに流し読みして見
驚くほど簡単にインフォグラフィックを作成できる無料ツール７選
ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. インフォグラフィックは、あなたの読者やファンを楽しませるコンテンツとして最適なものの一つだ。 さらに、ソーシャルメディアエキスパートのDan Zarrellaは、１万のFacebookページの中から合計１３０万の投稿を調べた結果、最も安定して多くのシェアを生み出すコンテンツは、画像コンテンツだということを発見した。 ※画像コンテンツの平均的なシェア率は0.25%、次に文字投稿で0.17%、３番目は動画投稿で0.1%。単なるニュースなどへのリンクの場合だと、0.04%しかない。 そして、ソーシャルメディアを有効活用するための、最も効率的な戦略は、見た目にも面白く、人の役に立つ画像コンテンツを定期的に提供することだという結論を出している。 こ
必読！5分でわかるレスポンシブWebデザインまとめ その2 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
デザイナーの野田です。 前回書かせていただいた「必読！5分でわかるレスポンシブWebデザインまとめ」が、大変好評だったため、今回も続編を書かせていただきます。 今回は、応用編のつもりでしたが、前回だけでは足りていない事が多かったので、もう少し基本となる部分を固めていきたいと思います。 本当に基本的な事ですが、大切な事ですので、少しでも皆様のお役にたてればと思います。 レスポンシブWebデザインで必ず考えなければならない事 「レスポンシブWebデザイン」で制作する際には、必ず考えなければならない事がいくつかあります。 これは、考えていなければ制作する際に必ずつまずく事でもございます。 ■対応デバイスの確認 まずは、対応デバイスの確認をしましょう。 現在、様々な解像度を持つデバイスがございます。大体のサイズとして下記のものが挙げられます。 ※PCの解像度に関しては、今回は省略させていただきます
それじゃあ何も伝わらない！元ディレクターがデザイナーになって気付いた、デザイン依頼で注意すべき4つのこと : LINE Corporation ディレクターブログ
ネッツアイに火の用心 あなたのハートにG-SHOCK！こんにちは、nakatanigoです。 かつてはディレクターブログを書く立場だったのですが、諸事情により遠ざかっておりました。 というのも、かつて前職でデザイナーをしていた経験から、ディレクターを２年ほど経験した後、デザイナーに転籍したのです。 そこで、今回はその経験から、ディレクターからデザイナーにデザインを依頼する際に注意すべきことをお話させていただきます。ディレクターがデザイナーに依頼をする際、こういう言い方は避けたほうがいいという事例もあわせてご紹介します。 大前提として、デザイナーはディレクターから言われたことしかやらないわけではありませんので、依頼に疑問があれば質問し相談します。しっかりとコミュニケーションをとれば下記のような事例は起こらないと思いますが、それが抜けてしまった場合には効果の小さいデサインができあがってしまうと
クリック率・コンバージョン率を高めるボタン。3つの大きなポイント
WEBサイトを運営していれば、サイトに訪れてくれたユーザーに【申し込み】【購入】【資料請求】【問い合わせ】などのアクションを、たくさん起こして欲しいと考えると思います。 そのためWebクリエイターは、どうしたらコンバージョン率や数が高まるのかを日々考え・テストを繰り返しています。 私もそのことを考えている1人として、今回はサイトの目的を達成させるために欠かすことのできない大変重要な要素の1つである【行動を呼びかけるためのボタン（Call to Action Button）】についての考えをまとめたいと思います。 目的を達成へと導くボタン ボタンはホームページの最終的な目的である【申し込み】【購入】【資料請求】【問い合わせ】などのアクションを、ユーザーに起こしてもらうためには欠かせない要素の1つです。ボタンのデザインやボタン内の文章を変えただけで、資料請求が増えたなんていう事例はたくさん存在
ポータルサイトのデザインをする時に意識したこと5つ - Design Color
もくじ グローバルメニューを埋れさせない 色を使いすぎない 余白を空けすぎない 囲み線を多用・強調しすぎない サムネイルに黄金比や白銀比を使ってみる 1.グローバルメニューを埋れさせない ポータルサイトは情報量がとても多いです。ユーザーを迷わせないためには、画面が遷移しても変わらずそこにいてくれる「グローバルナビゲーション」は頼りになる存在です。それが他の情報に埋れてしまってはもったいないですよね。なので、デザイン時にはまずこの子に注目してみました。 白抜きのメリット 色々なサイトを観察していると、ナビゲーションバーに白抜きを使っているサイトが多く見られました。 調べてみたところ、白抜きは小さな文字でもやや大きく見えるというメリットがあるとか。なぜなら、白は「膨張色」だからです。 膨張色とは明度が高いことから、他の色に比べて膨らんだり広がったり錯覚する色のことです。白や明度の高い暖色系が膨
レスポンシブ・ウェブデザイン基礎
1. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・ レスポンシブ・ウ ブデザイ ェ ン基礎 Responsive Web Design Basic こもりまさあき 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki 2. レスポンシブ ウェブデザイン基礎 Responsive Web Design Basic ・ 自己紹介 こもりまさあき http://blog.gaspanik.com http://protean.im 1990年代前半に都内のDTP系デザイン会社にてアルバイトをはじめる。大学卒業後 そのまま正社員となり、入出力業務、デザイン業務、ネットワーク関連業務に並行し て従事。2001年、会社を退職しそのままフリーランスの道へ。案件ごとに業務内容 や立ち位置が異なるため、職域的な肩書きは
フリーのガーリー素材いくつか / Maka-Veli .com
http://girlysozai.com/ 個人利用、商用利用可。二次配布以外であれば完全フリー。 このようなイラストがepsとpng配布されています。個人で運営されているとか。素晴らしいですね。 今回のメインビジュアルも、ほとんどこちらの素材を使っています。 No Reimer Reason http://noreimerreason.com/scrapbook_freebies.php けっこうな数のデータが揃ってます。PSDとか。 Lovey Mini Kit Free Digital Scrapbooking http://scrapbooking.about.com/od/freedigitaldownloads/ss/lovelyminikit.htm Pngでパーツになってた。 Child patterns http://hqtexture.com/vekt
ラフデザインをかっこよく、短時間で終わらせる方法 - ラクスルマガジン｜raksul [ラクスル]
株式会社ルネサンス（以下、ルネサンス）では、ビジネスリレーション部という、会社全体の生産性向上をミッションとする専門部署が存在する。様々な方法で業務の効率化、改善を模索する同部署で課長を務める中田敬介氏は7年以上に渡り部のメンバーと共に、縁の下の力持ちとして企業価値の向上を支えてきた。デジタルの活用が生産性向上のキーポイントとなるなかで、今後も見据えて2022年6月よりラクスル株式会社（以下、ラクスル）が提供するラクスル エンタープライズを導入。まだ初期段階ながらも業務時間の削減を実現している。
![ラフデザインをかっこよく、短時間で終わらせる方法 - ラクスルマガジン｜raksul [ラクスル]](https://cdn-ak-scissors.b.st-hatena.com/image/square/de81ecf6672792c00084a663ae3a893450e76c1e/height=288;version=1;width=512/https%3A%2F%2Fraksul.com%2Fmagazine%2Fwp-content%2Fuploads%2F2020%2F12%2Flp_pos_sikucyouson.jpg)
【実践編】少しの手間で大きく変わる、細部にこだわったWebデザインを
2013年3月23日 Photoshop 「少しの手間で大きく変わる、細部にこだわったWebデザインを」で紹介した「わずかな」加工を使ってボタンのデザインをかっこよくしよう！というチュートリアル記事です。前回の記事内にPhotoshopでの作成チュートリアルも載せたかったのですが、あまりにも長くなりそうだったので別記事にする事に。合わせて見てみてください！ ↑私が10年以上利用している会計ソフト！
少しの手間で大きく変わる、細部にこだわったWebデザインを
2017年6月29日 Webデザイン 「デザインしてみたけどなんだか物足りない…」そんな経験ありませんか？私はよくあります。それで色を変えてみたり、形を変えてみたりと色々試してみるのですが、結局どれもしっくりこなかったり。そんな時は元のデザインにほんの少し手を加えるだけで納得のいくデザインに変わることが多いんです。わずかな装飾で大きく印象を変える。そんな「ひと手間」に注目してみましょう！ ↑私が10年以上利用している会計ソフト！ 追記：Photoshopを使った加工の仕方を記事にしてみました！ » 【実践編】少しの手間で大きく変わる、細部にこだわったWebデザインを グラデーションを加える 「デザインしてみたけどなんだか物足りない…」そんな時はわずかなグラデーションを加えるだけで立体感がでて、ノッペリしたデザインを一新することができます。アレコレ装飾するよりもシンプルかつ王道。 ヘッダーの
配色で見るWEBデザイン-イエロー編 | Qrious Lab.
WEBサイトの印象は、キーカラーによって大きく変わる。世界のWEBサイトをカラー別に集めてみたいと思う。その第四回目は「イエロー：黄色」。黄色は知性を意味する色で人に喜びを与える色。心を弾ませ、楽しい気分にさせてくれるカラー。集中力や判断力、記憶力を高めるたり、一般的には注意喚起をうながす色としても利用されている。視認性があまり良くないレモンのような明るいものから、オレンジに近いものまで幅広く、背景色としてもよく使われているイメージがある。
illustratorのaiデータから画像を綺麗にスライスする方法｜Web Design KOJIKA17
illustratorのaiデータから画像を綺麗にスライスする方法 2011-01-08 illustratorのaiデータをWeb用の画像にスライスすると、画像が1pxズレが生じたり、Photoshopのスライス機能と違うので戸惑うことが多いと思います。 関西の某勉強会の懇親会でも「外注に頼んだデザインがaiデータで来て、スライスに凄い時間がかかった」という意見が多く聞いたので、illustratorのスライスの仕方をご紹介させて頂きます。 紹介するillustratorのバージョンはCS2ですが、CS以降のバージョンならほとんど機能が使えるはずです。 スライスの準備 単位 [ファイル]→[ドキュメント設定]で単位がピクセルになっているか確認します。 ここを変更すると、定規などの値も全てピクセルになるはずです。 カラーモード [ファイル]→[ドキュメントのカラーモード]がRGBカラーにな
最適な画像の書き出しは、JPG, GIF, PNG、どれを使うべきか
最適な画像の書き出しは、JPG, GIF, PNG、どれを使うべきか 2011-07-26 デザインされたものをコーディングする上で、画像はサイトのパフォーマンスにも影響する重要な要素の1つです。 画像形式には、jpg, gif, pngなど種類があり、それぞれの特性を理解した上で選定できているでしょうか？ 画像形式についてまとめてみます。 画像の種類 JPEG インターネットでよく使用される画像形式で、静止画像を圧縮する方法の1つです。 ブロック単位で圧縮変換を行うため、圧縮率を上げるとブロックノイズというノイズが生じます。 特に小さくすると赤の部分でノイズが発生しやすい。 IE6～8(IE9は未確認)において#02050aというバグがあり、 JPEG画像でopacityを使用すると#02050aの部分が透過jpgになるバグがあります。 上記の点を注意する必要がありますが、1670万色ま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
イラレアイコン
