クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

デザイン

【React】配色ジェネレーターを作った(HSBでメインカラー、アクセントカラー、ベースカラーを割り出す!)

Reactアプリの続きです。前回はアスペクト比ジェネレーターを作りました。 今回もデザイン系のアプリで配色ジェネレーターを作りました!HSBモードでメインカラー、アクセントカラー、ベースカラーの3色を割り出せる配色ジェネレーターです。そのソースコー…

【React】アスペクト比ジェネレーターを作った(画像の縦横比率を計算するツール)

Reactアプリの続きです。前回までは「ジャンプ率ジェネレーター」をNext.jsで作り直していました。今回は「アスペクト比ジェネレーター」に取り組みます。以前こちらでまとめた主要なアスペクト比による画像サイズのCSS数値を調べられるツールにります。それ…

【React】文字ジャンプ率ジェネレーターを作るシリーズ始動!(環境構築編)

Reactの続きです。前回はReact + TypeScript + CSS in JS環境のスターターキットを作りました。今回からこれを元にアプリ作りに入っていきます。最初に作りたいのは文字ジャンプ率ジェネレーター!今回は初回ということで、既存のGitHubリポジトリをクローン…

【React】UIフレームワークMaterial UIでマテリアルデザインを事始める

Reactの続きです。前回はstyled-componentsでCSS in JSを事始めました。今回はUIフレームワークMaterial UIを事始めたいと思います。その名の通りGoogleが提唱するマテリアルデザインのスタイルを簡単に設定できるツールです。それではいきましょう!

Figmaで完結する!Webサイト設計の流れ

Webサイトのデザインや設計を行うとき、昔は工程によっていろんなツールを使い分けていました。今はそれを(私の愛してやまない)Figma一つでブラウザ上だけで完結できます!

CSS Gridで12分割グリッドシステムが簡単に作れた(grid-template-areas推し!!)

HTML要素を横に並べる方法はいくつかあるが、その中の一つ「CSS Grid」。これまでちゃんと触ったことがなかったのでトライしてみた。CSS Gridとグリッドシステムは相性がいいのではないか?と思い実際に作ってみた。なお、自分はgrid-template-areas推しです…

【デザイン】基本がわかる6記事(メリハリ、縦横比率、画面分割、タイポ、色相環、配色)まとめ

デザインってどうやるの?むずかしそう。自分にできるのかな?私もそう思っていました。デザインにはいくつかの「基本原則」があります。その原則をギュッと凝縮した6記事をご紹介。「これを読めば独学デザイナーでもデザインに取り組める!」を目指して書き…

【配色の基本】面積比(メイン、アクセント、ベース)と色相分割【Adobe Color CC】

前回、様々な色相環を見ていきました。今回はいよいよ複数の色を組み合わせた「配色」の基本に入っていきます!複数の色はいったいどうやって選んでいったらいいのか?目的によって変わります。「主従をつける配色」「同等に分類する配色」の2つの目的で考え…

【配色】色相環のH値をいろいろ測ってみた(HSB、マンセル、オストワルト、PCCS、イッテン、NCS、Web配色ツール)

デザインの配色はRGBやCMYKよりもHSBを使った方が検討しやすいです。しかし、HSBの中の「H値(色相)」について調べるたところ、一筋縄ではいかないことがわかりました。色相環にはHSB色空間、表色系(マンセル、オストワルト、PCCS、イッテン、NCS)、Web配…

【行長・行間・ジャンプ率】タイポグラフィ事始め(適度な箱組みとは)

タイポの道も一歩から。文字のデザイン「タイポグラフィ」。様々な要素がありとっても奥が深い世界です。まずは見出しと本文を組み合わせて「箱組み」を組んでみます!ポイントは「行長」「行間」「ジャンプ率」です。

【画面分割】シンメトリー、黄金分割、白銀分割、グリッドシステムなどを一覧にしてみた

前回は画面の「アスペクト比(縦横比率)」を見ていきました。今回は画面の「分割」です。デザイン、レイアウトにおいてメイン要素、サブ要素を配置する際に画面をどこで分割するか?シンメトリー、黄金分割、白銀分割、3分割など「分割比」による分割と、あ…

【黄金比、白銀比】代表的なアスペクト比(縦横比率)を一覧にしてみた

デザイン上でよく使われるアスペクト比(縦横比率)。なんとなく言葉としては理解しているんだが実際の形状を並べて一眼で比較できるよう、一覧にしてみた。

デザインも配色も「メリハリ」が9割!基本を身につける学習方法

タイトルの「9割」は言い過ぎかもしれないが、「メリハリ」はとても大事な考え方と思っています。ポイントは「主役」と「脇役」をハッキリさせることです。美術系の学校を出ていない文系雑草独学デザイナーの私が試行錯誤しながら身につけた学習方法をご紹介…

【まとめ】家紋研究してみた

以前インスタにアップした家紋研究をまとめてみました。家紋というかシンメトリー図案の仕組み検証です。

デザトレ015 ランダムシームレスパターン

デザトレ015 ランダムシームレスパターン 前回の方法では四隅に余白ラインができてしまう。シームレスにするにはどうするか。 予め決めた四角の中に要素を入れる際、線をはみ出した時点で反対側に複製する(四角の距離分)。角にかかる場合は四隅。 四角でト…

デザトレ014 自作パターン1

デザトレ014 自作パターン1 家紋研究の鳥再登場。 4つに複製して1つ分の四角をセンタリングしてトリミングするとシームレスなパターンになる。 パターン #pattern

デザトレ013 家紋研究その5

デザトレ013 家紋研究その5 今回は72度5分割に絞って実験。 はじめガイドラインを作る。ガイド範囲内ならどんなに複雑な形でも成立する。しかしそれでは限定的…。 ためにし三日月を拡大してガイドからはみ出してみる。左は上側、右は下側にはみ出るが重なら…

デザトレ012 家紋研究その4

<p>デザトレ012<br> 家紋研究その4 先ほどの鈍角であれば、曲線でも重ならないのでは、という実験。重ならなかった! 7本だけないなぁ、とか菊十六紋の16本がない!という理由から整数じゃない角度も追加。 また、本数が多すぎるとかけた労力に対して印象があまり変</p>…

デザトレ011 家紋研究その3

デザトレ011 家紋研究その3 角度が鋭角だと重なるのではないか?という仮説を元に、90度未満の鈍角にしてみた。 線の太さの関係でくっ付いて見えるが、最後まで重ならなかった! デザイン #家紋 #シンメトリー #design #kamon #famlycrest #symmetry

デザトレ010 家紋研究その2

デザトレ010 家紋研究その2 1本線であればどんな角度を付けても重なることはないのではないか?という仮説をもとにいくつか頂点を加えてみたところ、72度の時点で重なり発生。 あと、だんだん本数が増えると結局みんな円になってしまうのかも知れない。 デザ…

デザトレ009 家紋研究その1

デザトレ009 家紋研究その1。 家紋は上下左右シンメトリーなど、回転させた形が多い。 自作するに当たり、どういう角度を入力すべきか。 360度を整数で割り切れる数を調べたところ24種類あった。 まずは直線に対してその角度を入力してみた。 最後の方は直線…

デザトレ008 グランジ風テクスチャ文字

デザトレ008 自宅は非Adobe環境につき、そこでグランジ風テクスチャを再現できるかテスト。 デザイン #タイポグラフィ #テクスチャー #グランジ #design #typography #texture #grunge

デザトレ007

デザトレ007 インバウンド向けリーフレットより 被写体や配色がとても和風でいい感じ。 また、被写体の形がそれぞれ違うので文字の配置もそれに合わせて変わっている。 文字のジャンプ率は低く、上品。 フォントはゴシック体だが、読みやすさ重視か。 デザイ…

デザトレ006

デザトレ006 アートブックフェアのチラシより。 写真をモノクロにすることで赤い文字一色が際立つ。 右の人物とかぶらないように大きな文字が配置されていて、顔と作業する手元がその文字へ視線を誘導させる。アンダーラインが文字をさらに強調している。4文…

デザトレ005

デザトレ005 バナー広告より。個人的なミニマムなものを好むのでこのような楽しいデザインも身につけたい。 文字の傾きが動きを出していてサイズのメリハリもすごくハッキリしているデザインですね。 後ろの花火のような装飾も祭り感を出していて賑やかです…

デザトレ04

デザトレ04 バナー広告より。 緑色の配色を研究したくていろいろ見たが、緑系統だけで差し色がないケースが多かった。 差し色がある例では補色の赤(クリスマスぽい)よりもオレンジを差し色にしている物が多い気がする。 大きい文字には黄色を使ったり。 デ…

デザトレ03

デザトレ03 某ファッション雑誌のフリーペーパーより。 雑誌名が頭の後ろのにあったり、下のコピーが女性に合わせて曲線上に配置されている。 背景の色は女性の大きなスカートで、口紅も同色。タイトルの金色がアクセントになっている。 デザイン #配色 #レ…

デザトレ002

デザトレ002 某飲料の昨年のキャンペーンのカバーです。 この青と緑が混ざった色味が昔から好きで、日本だと浅葱色?西洋ではターコイズ?小学校のときに近所のお姉さんが乗ってた日産パオ。それ以来の片思いなんです。この色。 デザイン #配色 #レイアウト

デザトレ01 デザイン模写

デザトレ、やっと開始できた。レイアウトや配色の引き出しを増やすことを目的とする。 文字は基本的には「あ ぁ ア ァ 亜 A a 0」絵や写真のトリミングのコツもつかみたいのだが、今回すら具体的に再現しすぎたかも…。もっと抽象的でもいいのかも?数増やし…