コミュ障だから明日が僕らをよんだって返事もろくにしなかった

何かを創る人に憧れたからブログをはじめたんだと思うよ

初心者だからデザインを学ぶことにした 7th

7回目です

初心者だけどデザインを学びます。僕は「デザイン=設計」みたいな感覚でとらえてるからやればやったことはどっかしらで応用効くもんだと思ってんですけどどうなんでしょう。まあいいや。やっていきましょう。

前回記事
初心者だからデザインを学ぶことにした 6th - コミュ障だから明日が僕らをよんだって返事もろくにしなかった



あ、関係ないけどポトフォリ用に作ったページ更新しました。
inujini666.studio.design
今回やった分は更新されていないです。そのうち更新します、たぶん。ところでLPカンプFigmaのリンク貼ってんだけど、リンクになっているの分かりづらいのよね。Studioでリンク分かりやすくカスタマイズする方法何かないものか……。


なんかレッスン増えてた

知らないうちにUIコンポ―ネント入門とかADOBE PREMIERE PRO講座とかWebディレクター入門とかできてたー。現段階だと深い内容がないからあんまり面白くないけどもこの辺りは更新されていけば面白くなりそう。僕が他所で謎知識を付ける前にどんどん深いところまでレッスンを追加していってくれると個人的に嬉しい。

とりあえずのざっくり感想
・UIコンポーネント入門
UIコンポーネントの名前についてのお話。Webだとそこまでな気がするけども、スマホ関連いじる際には名前を知らないとコードに落とすのも苦労するぐらい密接なやつって認識。まだ初めの方なので名前を憶えましょうぐらいの内容しかない…。


ADOBE PREMIERE PRO講座
僕が持ってないツールなんでやるとしたら代替でAviUtilとか使うと思います。まずはなんで映像制作をやるのかとかそんな心構えの話。個人的にこの心構えの在り方はぐっと来た。今はYouTubeだけじゃなくTwitterみたいなSNSでも動画を流せるんで使いこなせれば広告効果は強いのです。


・Webディレクター基礎知識
Webディレクターが何をするかなお話。とりあえず現段階だとサイトマップの作り方編だけだった。僕Webディレクターってコード書くイメージないんですけどどうなんですかね……。
あと関係ないけどこういう系の資格もあるらしいですよ。
webken.jp

ちなみに、ここに練習問題があるそうです。
works_corporationさんのページ - けんてーごっこ|みんなが作った検定クイズが50万問以上
ここに貼られると公式問題って感じが全然しない……。公式問題らしいです。まあいいや。こっちのやつはそのうち「やってみた」とかいう人柱感想記事をあげようと思います。



やってみた

そんじゃ手を動かしてみたってやつやっていきましょうか。
■アイコン制作
まずはアイコン制作から。いつものように使うツールはInkscapeです。心優しい方、イラレください……。

・ハート編
円とパスを組み合わせてハートを作ります。
f:id:andron:20191101050539p:plain
パスいじりの練習だそうで…。
f:id:andron:20191101050518p:plain
この辺いじればいけそう。イラレと違ってパスの挙動にめちゃくちゃクセがあって使いづらい……。

・ビル篇
四角形を組み合わせてビルアイコン作ります。
f:id:andron:20191101052448p:plain
タイルクローンの練習とかにいいかもしれないです。



CSS関連
・三角形アイコンをつくろう編

まずはこれを見てほしい。そのままパクって参考にするのでは勉強にならないとおもい回転させている(邪魔w)。まあソース見ればいい話なんでそのまま進めます。ここのCSSborder-xxx-color: transparentにしてやって透明してやれば三角形アイコンができるとのことです。

・矢印編

矢印の書き方についてこんな感じのやつできます。なにやっているか分れば向きも自由に変更できます。ところで、px使いづらいからemにしてみたけどこの辺の比率ってどうそろえるのがCSSいじり的に正解なんですかね。教えてCSSつよつよマン!calc()とか%とかで比率整えていくって認識でいいんですかね……。

ハンバーガーメニュー編

スマホサイトとか画面上部にでてくる「≡」これのことね。最近はクリック率が悪くなるから使わないのが主流とか言わていたりいなかったりします。とりあえずそのままパクるのもアレなんでオンマウスで「×」になるようにいじってみた。



■ LP制作
今回のネタは転職サイトのLP制作。今回も元サイトの方はPhotoshopだけど、当方そんなツールはないのでFigmaで作ります。
Figma
んで、こんなんつくってみた。


とまあ、今回はこんな感じです。次回は映像制作ネタとかできるようになってるんかな……。