コピペで使えるオシャレな配色パターン見本 25 （全組み合わせWebカラーコード付） - LITERALLY
今回はひたすら配色パターンを紹介していく。探しやすいように色ごとに分け、使いやすいように解説とWebコードも合わせて紹介する。プレゼン資料、Webデザインなどで目的に合った配色をそのままコピペして使って頂ければと思う。 ▼ 目次 カラフルな配色パターン 橙系の配色パターン 青系の配色パターン 緑系の配色パターン 黄色系の配色パターン 赤系の配色パターン 高級感を表現する配色 わび・さびを表現する和風配色 シンプルに格好良いグレーの配色 カラフルな配色パターン 1. 淡い「カラフル」 ■ #FF7D7D ■ #FFD580 ■ #B3E2B4 ■ #ABE7FF ■ #B8B2EA ■ #DBDBDB 淡いカラフルな配色は、白の背景に合わせると「透明感」を出すのに効果的。カラフル系の配色は扱いづらいので、上のコードをそのままコピペして使って頂くのが良いかと思う。 2. 力強い「カラフル」 ■
さくっとイメージで学ぶ『色彩の心理学』と『配色の基礎知識』 - LITERALLY
今回は知っておくと何かと役立つ『配色の基礎知識』と『色の心理学』についてまとめます。 1. 色を決める3つのパラメーターをおさえよう まず、基本的なところを簡単に説明します。色を決めるのは、①色相 ②明度 ③彩度の3つのパラメーターです。 色相 赤、青、黄などの色みの違いを表します。これは分かりやすいですね。 彩度 色みの強さの度合いを表します。いわゆる「あざやかさ」ですね。 明度 色の明るさの度合いを表します。限界まで明度を高くすると白になります。逆に限界まで低くすると黒になります。 この3つは「色の三属性」なんて呼ばれたりします。この3つは配色の話で何かと出てくるのでおさえておきましょう。 2. 補色について知っておこう 色相の並びをぐるっと1周つなげたものを色相環と呼んだりします。この色相環において、向かい合う2色ペアーの関係を補色と言います。この補色関係にある2色は、お互いを引き立
全ての人が知っておくべきデザイン・レイアウトの基本ルールとテクニック15選 - LITERALLY
デザイナーでなくとも、デザインについてのいくつかのルールを知っておくと、日々の生活で何かと役に立つ。今回は、誰もが知っておくべきデザインの基本原則・テクニックを紹介する。 1.デザインの基本原則を覚えよう 1-1.「1/3ルール」を覚えよう レイアウトや写真の構成を考えるときには、黄金比*1よりも「1/3の法則」が便利だ。上の図のように、全体を9等分割したとき、各線の交点（図の丸点）に主張したいモノを配置するようにする。これだけで、不思議とスッキリとしたデザインになる。技の1つとして覚えておこう。 1-2.端をそろえて線をつくろう 写真や文などの「要素の端」をきちんとそろえると、きれいに整理されて見える。これはデザインにおいてとくに重要な基本ルールだ。全てをそろえる必要はないが、縦にいくつか要素を並べる場合は常に意識しよう。 1-3.視線の流れを意識したデザインにしよう 情報がたくさん詰め
Webデザイナーが一度は読んでおくべきおすすめの本13冊 - LITERALLY
先日、読者の方から「Webデザイン習得するにあたって参考にした本は何か」という問い合わせを頂いたので、回答記事を書こうと思う（遅くなってしまいすみません）。せっかくなので、Webデザインの専門知識に関する本だけでなく、いつもインスピレーションをもらっている本も合わせて紹介しようと思う。参考程度にどうぞ。 以下の3つのジャンルについて分けて紹介。 WEBデザインを学ぶための本 デザインセンスを磨くための本 インスピレーション刺激本 WEBデザインを学ぶための本 1 インターネット技術の絵本 振り返れば、いちばんはじめに読んでおけばよかったなと思うのが、この絵本シリーズ。Webデザイン含め、プログラミングを始めた人は「Webデザインがどうやってインターネットに公開され、どうやって人の目に触れるのか」や「今の作業の全体における立ち位置」がいまいち見えなくてモヤモヤすることが多いと思う。HTMLと
作業効率を上げる！便利なExcelのショートカット30つをランキング一覧で紹介 - LITERALLY
今回は「Excelの主要ショートカットを覚えたいけど、一度に全部は覚えきれない」という人向けに、使い勝手の良いショートカットを厳選した上で便利度でランキングにした。ランキング上位は比較的覚えやすく使いやすいモノが多いので、上から覚えられる範囲でチェックしていくと良いだろう。 ※あくまでも順位は個人的な経験に基づき、判断したものであることに注意。 1位. コピペ Ctrl + C でコピー、Ctrl + V で貼り付け。書くまでもないかもしれないけど、最も良く使われるであろうショートカットなので1位に。 2位. 切り取り・貼付 上の切り取りバージョン。切り取られた元のセルの中身は消える。 3位. 元に戻す Ctrl + Z で1つ前の状態に戻る。入力ミスなどをしたときに、すぐに前の操作を取り消しできるのはとても便利。なお、Ctrl + Zで戻したものの、やっぱり戻す必要がなかった場合はCtr
【厳選28】本当によく使う便利なMacのショートカットキー 一覧 - LITERALLY
日々の作業を効率的するためのショートカットを、とくに使えるモノだけ紹介していきます。いきなりショートカット一覧を見せられても、どこから覚えられば良いか分からなくなると思うので、厳選してます。なお、何かしらPCにこだわりがありそうなMacユーザーということでコピー&ペースト等の超基本的なものは外してます。 絶対に覚えたい11個ショートカット まずはこれを覚えましょう。マスターすれば作業スピードが大幅に上がるはずです。 1. 直前の操作を取り消す 大抵のアプリで使用できるショートカットなので覚えておきましょう。また、これにshiftを足した「command + shift + Z」 で「取り消しコマンドを取り消す」ことができます。 2. キーボードだけでアプリを切り替える Command + Tabで今開いているアプリ一覧を横並びで表示します。Tabを何回か押せば、アプリを切り替えることができ
すぐに使える、気の利いた英語のフレーズと面白い名言を25つ紹介 - LITERALLY
好きな言葉をストックしている。日本語でも、英語でも、響きやテンポの良い言い回しが好きだ。「うまいこと言うなぁ」という言葉が好きだ。皮肉が効いたようなアメリカンジョークっぽい表現が好きだ。 今回は、覚えておけば割とすぐにでも使えるような、お気に入りの英語のフレーズと諺を25つ紹介する。 明るく励ます英語の名言 1 When nothing goes right, go left. 何もかもがうまくいかないときは、右に行こう。 『go right』は"うまく行く"や"正しい方向に物事が進む"という意味にもなるし、"右に行く"という意味にもなる。この文にはその２つの意味をかけて『go right』に行けないなら『go left（左）』に行こうと、冗談っぽく笑い飛ばすニュアンスが込められている。まぁ気楽に行こうよと肩の力を抜いてくれるような言葉。 2 A bad day of fishing tu
聴衆を惹きつけ納得させるプレゼンテーションを作る5つの方法 - Literally
プレゼンテーションはいくつかのポイントを押さえれば、大幅に分かりやすく、説得力があり、オーディエンスの心を掴むものになる。今回はパワーポイント等でのプレゼン資料の作り方のポイントを５つに分けて紹介する。 1. 作り出す前に構成をざっくりと考える 聴く人の腹に落ちるプレゼンテーションをしたければ、まず構成を練ろう。行き当たりばったりで、思い付いたことをスライドにまとめると、最も伝えたいメッセージが薄れてしまったり、論理構造が狂ってしまう可能性があるからだ。一方で、実際に手を動かしてスライドを作っていく中で良い表現は浮かんでくるのも事実。 そこで最低限、あらかじめ次の2つをざっくり書き出すようにする。 最も主張したいメッセージ (結論） プレゼンのどこかしらに盛り込みたいこと 次に、書き出されたものを見ながら、どうやって(1)結論までのストーリーを作るか考える。以下に、そのストーリーの代表的な
Amazonのおすすめ商品：100万費やしてきた僕が「買ってよかったもの」をまとめて紹介 - LITERALLY
Amazon好きである。なんでもかんでもAmazonで買う。野菜とかも買う。Amazonが好きすぎて、ジャングルのAmazonに行ったこともある。（↓当時の写真） これまでにAmazonに費やしてきた額を計算してみると100万円を超えていた。驚いたが、後悔はしていない。Amazonで買った数々のモノにより、ぼくの生活はずっと豊かになったからだ。今回はぼくが今までAmazonで購入してきたモノのうち、とくに買ってよかったと思うものをまとめて紹介する。 ※ 2016年11月21日 「買ってよかったもの」2つ追加 1. スマホ対応 VRヘッドセット このVRヘッドセットの魅力はなんと言ってもその価格の安さにある。なんと2,000円程度で購入ができるのである（2016.10月時点）。憧れの、あのVRを自宅で、たった数千円で心ゆくまで満喫できるのだ。 Amazonでこのヘッドセットを見つけ、そのレビ
世界中で10万枚写真を撮ってきた僕がおすすめのカメラ&レンズを紹介する - Literally
海外放浪をきっかけに本格的に写真を撮るようになりました。 海外にいる間は、常にカメラを首から下げ、写真を撮り歩いていました。山の上から朝日を撮るために朝３時に起き、トレッキングに出ることもありました。パタゴニアの氷河の前で凍えそうになりながら、6時間崩落を待つこともありました（本当に寒かった）。 日本に帰ってきてからも旅行にいくたびにカメラを持ち出し、写真を撮っています。ここ5年間の撮影枚数は15万枚を超えています。 今回は次の３つについて解説していきます 分かりやすいカメラとレンズの選び方 おすすめのカメラ ぼくなら今どのカメラを選ぶか おすすめのレンズ ぼくなら今どのレンズを選ぶか イグアスの滝 by NEX-5N（SONY ミラーレス一眼カメラ） 現在「おすすめ カメラ」と検索しても、細かい性能差を比較した記事ばかり出てきてします。 性能差を見ても結局どのカメラが良いのか分かりません
はてなブログを一瞬でおしゃれにする最強のデザインカスタマイズ方法（テーマDUDEの手引き） - LITERALLY
以前、はてなブログのスマホデザインのカスタマイズ方法について書いた。 はてなブログのスマホデザインCSSをカスタマイズして、簡単にオシャレに見せる方法 - Literally 多くの方に参考にして頂いたようでとても嬉しい。続編を書いて欲しいというご要望をいくつか頂いたので、僭越ながらまたデザインカスタマイズのTipsを書こう思う。前回はスマホデザインについてのみ触れたが、今回はPC表示のカスタマイズについて。主にコピペだけで「超カンタン」におしゃれなブログが作れるので、Webデザイン初心者の方にも是非読んでいただきたい。 はてなブログユーザーでないのにこのページに辿り着いてしまった方、大変申し訳ありません… はてなブログテーマ「DUDE」を作りました。 「はてなブログを一瞬でおしゃれに美しくする最強のデザインカスタマイズ方法」と仰々しいタイトルを先に決め、ブログのカスタマイズ記事を書き出し
フリーランスのデザイナーが０から仕事をもらっていくための戦略をまとめてみる - LITERALLY
先日『１年でフリーのWebデザイナーになった僕が実行した8つのステップ』という記事を書いたところ、フリーランスデザイナー志望の方からクライアントからの仕事のもらい方や価格設定等についてご質問を頂いた。今回は、返答がてらフリーのデザイナーが仕事をもらっていくための戦略をまとめてみようと思う。 あくまでもここで書くのはぼくが実行したことと、実行すれば良かったのかもしれないという個人的なアイデアなのでご注意ください また、ここではデザインスキル・プログラミングスキルがある程度あるものとして話を進めていきます Webポートフォリオを作る ポートフォリオは知名度のないフリーランスが仕事をもらうための唯一の武器 個人で仕事を進めていくのであれば、ポートフォリオは必要不可欠だ。身元もよく分からないフリーランスの仕事の質を保証してくれるのはただ１つ「制作実績」だけだからだ。当たり前だがポートフォリオには自
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
