Webデザイン学習日記

これは僕がWebデザイナーになるまでに学んだことを書き綴っていくブログです。

デザインのアイディアに困っている人必見!書籍「あるあるデザイン」のアウトプットその1。


左から4分の1の法則

 

こんにちは!最近眼精疲労で右目がピクピクしているカエデです。

 

記念すべきアウトプット初日は「左から4分の1の法則」です。

 

ちなみに僕が作成した作品はこちらです!

 

f:id:kaedebook:20190708185632p:plain

 

題して「Italian restaurant "Yamabaccho's"」です!

このように4分の1に画像などを入れて領域を分けることにより、画像にも文章にもちょうどいいバランスを取ることができるのです。

 

実際に作ってみて思ったことは、4分の1に画像があることによって4分の3の領域はシンプルでも成り立つということです。

 

今回僕の中では、高級料理店のトップページということを意識していたため、シンプルかつ上品なデザインに仕上げたいなと思っていました。

というのも、最近東京で生活していたので結構街並みなどを見ていたのですが、高級そうな料理店ほど隠れ家みたいな店が多いんですよね。

看板もなく、装飾もなく、ただ木の扉があるみたいな。ワンポイントでロゴがあるくらいだったり。

そういうのをみていたので高級店ほど多くは語らないんだなと思いました。(ここ重要。テスト出ます)

 

なので4分の3の領域は余白をしっかりととりながら、行間も広く、余裕のあるシンプルな作りになっているかと思います。

 

ただこのデザインのみで全面を覆っていたらそれはそれで物足りないし、色も暗めでなんだか物足りないデザインになっていたかと思います。

 

しかし!

ここで「左から4分の1の法則」を使ったことで、画像がバランスよく入り、色合いも出て、4分の3のシンプルなデザインがつまらなくないものになりました!

 

「左から4分の1の法則」は実用性のある素晴らしいデザインだなと改めて実感しています!

皆さんもアイディアに困ったらぜひ使ってみてはいかがでしょうか?

 

 

以上が「左から4分の1の法則」のアウトプットでした!

フィードバックや自分ならこうしているとかありましたら是非是非コメントください!

 

 

また、僕自身のポートフォリオサイトを上のURLから見れますのでそちらの方もよろしくお願いします!

 

最後までみていただきありがとうございました!

 

 

 

書籍「あるあるデザイン」で学んだことのアウトプットをしていきます。

こんにちは。最近口の中を切って口内炎になるかならないかビクビクしながら生きているカエデです!

 

 

今回は書籍の「あるあるデザイン」を読んで学んだ知識を実際にアウトプットしていこうと思います。

 

この本は「けっきょく、よはく。」などで有名なingecter-eさんの本で、今まで名前のなかった”あるあるデザイン”に名前をつけてしまい、デザインのイメージでわかりやすく読書の皆さんに解説をしてくれる本です。

 

この本を読んでみての感想なのですが、かなり良かったです。

最近ポートフォリオなどを作っている時にアイディアが思い浮かばなかったり、自分の表現の幅が狭いと感じることが増えてきて、悩んでいたのでこの本に出会えて最高でした!

 

なので、この本で自分自身真似したいなと思ったデザインを実際に真似して、このブログに載せていこうかなと思います。

 

全部で45のあるあるデザインがあるのですが、その中から厳選した25(結構多かった笑)のデザインをこれからアウトプットしていきます!

 

僕のアウトプットの作品に対してぜひフィードバックなどのコメントをいただけると嬉しいです!

 

 

なんだかよく分からないGitについて

Gitについて簡単にまとめてみた

皆さんどうもこんにちは!かえでです。

 

今回はずーっと苦手意識のあったGitについて簡単にまとめていきたいと思います。

皆さんの中にも苦手意識のある方は多いのではないでしょうか?

僕の場合はそもそも何をしているのかが分からなかったり、ターミナルを使うこと自体にすでに抵抗があります。笑

ただ今後絶対に必要になってくるであろうGit...

今回ここでまとめることで苦手意識とはおさらばしたいと思います!

 

 

三つの概念

まずGitには三つの概念が存在します。

 

1. ワーキングディレクト…Gitで管理されていない状態。

 

2. ステージングエリア...Gitで管理する対象となっている状態。

 

3. Gitディレクト...Gitの変更履歴を記録した状態。

 

以上の三つが存在します。

つまり僕たちはワーキングディレクトリ (Gitで管理されてない) の段階にいるものをGitディレクトリ (Gitの変更履歴を記録) の段階にまで持っていきたいというわけなんです!

さてさて、そうするためにはどうしたら良いのかというのが次になります。

 

 

ワーキングディレクトリからGitディレクトリにいくには

まず、1のワーキングディレクトから2のステージングエリアに行くにはステージングという作業が必要になってきます。

 

ステージング...対象ファイルをGit管理下に置く。(git add)

 

管理されていない状態から管理する対象にするには管理下に置く必要がある。ということですね。当然と言えば当然です。

 

次に、2のステージングエリアから3のGitディレクトに行くにはコミットという作業が必要になります。

 

コミット...ファイルの状態に保存する作業。(git commit)

 

管理する対象を記録するには保存する必要がある。ということですね。

 

 

作業の流れはわかってもらえたかと思います。

次は実際ににターミナルで行う際の流れを見ていきたいと思います。

 

 

ターミナルでのコマンド入力

「kaede」というディレクトリ内に「book」というファイルがあるとして、実際にこのファイルをgitにあげて見たいと思います。

 

Gitリポジトリとして初期化

cd  kaede

#bookをGitにあげたいので、まずはcdでkaedeというディレクトリの中へ入ります。

 

git init

#ここでkaedeをGitリポジトリとして初期化します。

これで初期化が完了しました。

 

ファイルをGit管理下にする

git add book

#これでkaedeディレクトリ内のbookをGitの管理下に置くことに成功しました。

ここが先に学習したステージングの段階ですね!

 

変更を記録

git commit -m "初めてのコミット"

#-mでコメントをつけて状態を記録します。

ここはコミットですね!

 

 

これで一通りの作業完了です!

このような流れで今後はやっていけば簡単にGitに記録ができていくと思います。

 

また、記録した内容を更新したいときは、git commitだけではなく、git addをしてステージングエリアに乗せてからgit commitする必要がありますので注意してください!

 

 

以上で今回のGitまとめ(簡単)を終わりたいと思います。

最後までありがとうございました!

 

 

 

 

 

 

 

コーディング時にあれなんだっけ?ってなるCSSをまとめてみた

みなさんこんにちは!かえでです

 

今回はですね!

コーディング時にあれなんだっけ?ってなるCSSをまとめてみた」ということで、かえでがよく忘れがちになってしまうCSSを今回書いていきたいなと思います!

 

皆さんも忘れることって多々あると思います笑

僕もWebサイトを作っている時によくCSSを忘れがちなんです。

「あれなんだっけなー?」「こういう時ってどう書けばいいんだっけ?」と考えて考えた結果、結局ネットで調べる始末...笑

調べてみると、「あれこれ前も来たサイトだけどこれだっけ?」「あれこれは全然違うなー」とあれこれ調べてるうちに時間を使ってしまって、損した気分になります笑

 

しかも一度だけではなく、また忘れるもんなんですよね...泣

 

なので今回まとめてみましたのでもう忘れることはないでしょう...多分。

 

よく忘れるCSSまとめ

letter-spacing

まず最初にこちらですね。

letter-spacingは指定した文字の間隔を調整することができます。

これが案外忘れがちで、文字に関することは割とtextだったりで表現されること多いのですが、letter-spacing...個人的に覚えづらい笑

英語がわかる人から見たらバカだと思われそうで恐いですが...笑

 

line-height

続いてはline-heightですね。

これは指定した文字の行間(行の高さ)を指定することができるCSSです。

これもletter-spacingと同じような部類の、文字を調整するために割と多用することの多いCSSだと思います。

こちらはlineが原因ですね笑

lineから文字に発想することが難しい笑(*全て個人的な意見です

 

text-decoration

これはaタグの装飾を調整する際に使用します。

僕はnoneを指定して、主にaタグの下線を消す際に使用しています。

実はこれは次に出てくるものと混乱してしまいます笑

 

list-style

これはliタグのリストの装飾を調整する際に使用します。

これが実は先ほど紹介したtext-decorationと被ってしまうことが多くて、きちんと覚えられていない原因かもしれません。

 

transform: rotate(値deg);

こちらは文字を斜めにすることのできるCSSです。

おしゃれなサイトを作ろう!と思った時に割と使うことが多いのですが、だいぶ忘れがち笑

書き方が他のと比べて特殊なので大変ですが覚えられるようにしたい...!

 

 

以上がよく忘れがちなCSSでした!

次回は有名な著書「なるほどデザイン」のまとめを書いていきたいと思います!

 

 

はてなブログ始めました!

はじめましてかえでです。

 

みなさんこんにちは!今日からブログを開設いたしますかえでです。

まずは始めにこのブログについて綴っていこうかと思います。

 

このブログは名前でもわかる通り、現在Webデザイナーを目指している僕かえでが、日々学習していることをアウトプットしていく場となっています。

しかしアウトプットだけでは終わらずに、このブログを通じて誰かの助けになったり、現在自分と同じように学習中の方などと繋がったりと、このブログがいろんな意味を持てるようなものにしていきたいと思います!

 

そのために...!

週に一回はブログを更新していきたいと思います!! いえい!ぱちぱち...

 

...大したことないと感じたそこのあなた。継続は力なりです。

 

まあとりあえずものは試しということで、これから地道に更新していきたいと思っています。

皆様どうかよろしくお願いします!

 

 

軽い自己紹介

 

最後になりますが、軽い自己紹介をしたいと思います!

 

かえで

高校卒業後警察官になるもメンタルがやられて一週間で辞める。笑

メンタルがやられたせいかボクシング選手になろうかと一瞬思ってしまったが、すぐに頭を冷やして「おれITで成功しよう」と決意。笑

専門学校とプログラミングスクール、どちらにしようか迷った末プログラミングスクールに通うことを選択。

が...

 

プログラミングの洗礼を受けることになる。笑

やべえよプログラミング...環境構築からしんどいよ...

次から次へとバグが襲いかかってくるよ...

 

しかし、そんな時でも僕の心を支えてくれていたのはWebサイト制作だった。

自分でWebサイトを作ってる時はどれほど楽しかっただろうか...

君といた時間は楽しかったのに...バックエンドではバグが僕を苦しめるよ...

そうだ、Webデザイナーになろう!

そんなこんなで今に至ります。笑

 

こんな僕ですが温かい目で見守ってください。笑

 

これから学習するにあたって、いろんなアドバイスを皆様からいただけるとめちゃくちゃ嬉しいです!

ぜひこれからもよろしくお願いします!