勉強 思ったこと

2019/6/2

【実録】「ウェブカツ!!」を6か月やってみた感想

少し遅れましたが、ウェブカツでの報告ブログがとうとう6回目になりました。 2018年11月から学び始め、5月で半年経過。 とにかく目まぐるしく過ぎていった半年でした。 そして今現在(7か月目)、おかげさまでフルリモートで仕事を頂けるようになり、先週開業届を出してきました。形だけ見れば今流行りのフリーランスというやつですが、当の本人が一番驚いています。   6か月の軌跡 ウェブカツに入った当時の私の状態はこんな感じ。 ・HTML/CSSは一応読めば理解はできる(ページ制作経験なし) ・JS、PHP ...

勉強 その他

2019/4/29

自己アピールページ作成のすすめ

先日ツイッターで「自己アピールページを作った方がいいよ」的な内容を書いたのですが、反響が大きめだったことと、リプ欄で繋ぎ忘れてテキストがバラバラになったのでまとめ直しました。ついでに追記もしておきました。 ※スマホだと画像の文字が小さくて読みづらいです、すみません。   ツイッターでのテキスト全文 この1週間、営業に使えるデザイン作品とそのテンプレページを作っていました。 (簡易版) https://raradi.com/wkmin/appeal.html 実際には序文などもっと丁寧に文章を書い ...

勉強 プログラミング

2019/3/21

【実録】「ウェブカツ!!」を5か月やってみた感想

ウェブカツでの報告ブログ5回目です。 5か月目まであと1週間ほどありますが、ポートフォリオサイトが完成し勉強的にもキリが良かったためこの時点で報告ブログを書くことにしました。 最近多くの方が受講されていて、「このままウェブカツを進めたら数か月後にはどんな感じになるのだろう」「Winのまま進めて大丈夫?」と感じている方が多いと思うので(実際に質問を受けました)、今回はそこをメインに書いてみたいと思います。   現在の状況について 勉強時間と進捗はだいたい以下の通り。 平日:0-1時間(ウェブカツ) ...

勉強

2019/3/9

デザインが苦手な方が注意するとよさげな点

先日「KMYさんのようにデザインを作るにはどうしたらいいですか」と質問をいただきました。 また、ここしばらくウェブカツのTL上でも、今フリーランスでWEBエンジニアを始めたばかりの方のNoteでも「デザインが苦手」というのを見たので、私がデザイン上で気を付けているちょっとした点について書くことにしました。   といっても私はデザインのプロではありません。 実はデザインを勉強した経験も一切ありません。 そういう点で私が実践していることは、他の方にも実践しやすいのではと思います。   デザ ...

勉強 プログラミング

2019/2/28

【実録】「ウェブカツ!!」を4か月やってみた感想

ウェブカツで勉強を初めて4か月が経ちました。 そして折り返しをとうに過ぎ、いよいよ半年が見えてきました。   現在の状況について 勉強時間と進捗はだいたい以下の通り。 平日:1-2時間(ウェブカツ) / その他2時間 休日:ほぼ勉強時間なし (制作物ちょいちょい程度) 進捗:現在JS上級部/L3 (1か月でJS中級、HTML/CSS中級~上級、JS上級途中まで。その他WEBサービス部やJS入門を繰り返す) 勉強時間を取れるのはほぼ平日のみです。 なお、4か月目はウェブカツ講座を新しく進める時間よ ...

勉強 プログラミング

2019/1/31

【実録】「ウェブカツ!!」を3か月やってみた感想

  ウェブカツで勉強を初めてあっという間に3か月経ちました。   現在の状況について 勉強時間と進捗はだいたい以下の通り。 平日:1-2時間(ウェブカツ)/ その他2時間 休日:ほぼ勉強時間なし 進捗:現在JS中級部/L15 (1か月でWEBサービス部(2回目)、PHPオブジェクト部、WP部、JS中級途中まで) 勉強時間を取れるのはほぼ平日のみです。 講座を復習しつつ自分のサンプル作成などに時間を割いていたりして、正直進み方で言えばかなり遅い方だと思います。   3か月目、自 ...

勉強 プログラミング

2019/1/18

「Progateとウェブカツどっちがいいの?」

ちょうど昨日ブログに書いたのですが、コンスタントに「Skillhacks」と「ウェブカツ1か月目」の記事がよく読まれています。 「ああ、皆どこで学べばいいのか悩んでいるんだなー」と思っていたのですが、ツイッターのハッシュタグ「#ウェブカツ」を見ていると、ここしばらく毎日のように   「最近よく聞くけどウェブカツっていいのかなあ(チラッ」 「Progateとウェブカツ、悩んでいるんだけど…」   というツイートをよく見るようになりました。   そこで、一応どちらでも勉強している ...

勉強 プログラミング

2018/12/27

【実録】「ウェブカツ!!」を2か月やってみた感想

  ウェブカツで勉強を初めて約2か月経ちました。 現在の状況ですが、勉強時間はだいたい以下の通り。 1日平均 : 2-3時間(ウェブカツ)/ その他2時間 総合計 :約120時間 平日はウェブカツで大体2-3時間+その他2時間。 休日はPC前に座る時間がほぼ時間が取れないため、本を持ち歩き目と脳ができるだけコードを忘れないようにしています。 ・現在の状況について ・各科目について   1)HTML/CSS   2)JS/JQuery   3)PHP   4)WEBサービス部   5)PHPオブジ ...

勉強 雑記

2018/12/4

最初からウェブカツにしておけば

※追記: 知り合いから「興味を持った人のためにウェブカツの内容もある程度書いておいた方がいい」との指摘を頂いたので、記事の最後にリンクと内容を貼っておきます。   ----------------------- 以前私はSkillhacksというサービスを購入し勉強しようと思っていたのですが、結果的には大失敗でした。   その時、たまたまタイミングよく「侍エンジニア塾、SkillHacksで被害に遭われた方は無料にします」という趣旨のウェブカツ主催者様のツイートを見つけ、ご好意で今ウェ ...

勉強 思ったこと プログラミング

2019/1/10

【実録】SkillHacksを2週間で止めてしまった理由

※ここではSkillHacksを購入し、実際に使った個人の感想を率直に述べています。SkillHacks主催者を誹謗中傷する意図は全くございません、予めご了承ください。   現在、プログラミングの勉強をウェブカツ!!で毎日猛勉強中ですが、実はその2週間前には「SkillHacks」というプログラミング学習サービスを購入していました。2018年10月の事です。   その時の私は、このような状態でした。 「HTML/CSSは読み書きできるが、もっと高度な部分まで学びたい」 「WEB系のプロ ...

勉強

デザインが苦手な方が注意するとよさげな点

投稿日:

先日「KMYさんのようにデザインを作るにはどうしたらいいですか」と質問をいただきました。

また、ここしばらくウェブカツのTL上でも、今フリーランスでWEBエンジニアを始めたばかりの方のNoteでも「デザインが苦手」というのを見たので、私がデザイン上で気を付けているちょっとした点について書くことにしました。

 

といっても私はデザインのプロではありません。
実はデザインを勉強した経験も一切ありません。

そういう点で私が実践していることは、他の方にも実践しやすいのではと思います。

 

デザインに必要なこと

これについては、私は明確に答えられます。


1)余白


2)フォント


3)写真


4)神様

 

私の場合は、多分これだけです。

 

余白

デザインがセンス良く見えない場合、まず余白の使い方がよくないことが多い気がします。
とにかく何かを詰め込んで詰め込んで、ギッチギチ。

とにかく余白!!!!
今自分の人生に必要なのはpaddingだ!

これくらいの意気込みでいいくらい、余白大事だと思います。

 

そして基本、余白はそろえること。
ラインがそろっているとそれだけでおしゃれっぽく見えるものです多分。

よく他の方の作品などを見て思うのでですが、「上と下の余白の量が違う」「左右の余白の量が違う」←これが本当に勿体ない…!

多分中を作って安心してしまうのでしょうが、そこで気を抜くのはダメ絶対。

 

文字の間隔も!

そして、実は文字の間(htmlでいうところのletter-spacing)や行間(line-height)もかなり大事です。

フォントは打ったままだと結構不格好なことが多いので、文字の間隔をよく調整します(カーニングといいます)。

私の場合は単語を1文字ずつバラバラにしてPhotoshopで1つずつ調整したり、htmlだとUl/liで内容の文章に合わせて、リストの行別にletter-spacingを設定することもあります。

 

例えばこの「Kmy's」の赤文字。

これはpng画像なんですが、「K」「my」「'」「s」を4つのレイヤーに分けて位置調整を行い、1枚の画像にしています。

そして小さい黒文字も画像ですが、これもカーニングで相当時間を使っています。たかがこんな小さい字に。

そのままフォントを使ったものと比べると、実は全く印象が違ってくるんですよね。

 

 

フォント

私のデザインの作業時間の半分以上は、フォントと写真探しです。

なぜなら、デザインセンスがなくてもフォントが良ければそれなりに見えるからです。

例えばまた上の写真ですが、赤文字の「Kmy's」に色々なフォントを数十種類は試しています(黒文字も相当試してます)。

ばっちり合うフォントが合ったら儲けもんで、それだけでもうサイトは8割オシャレが保証されたみたいなもんです!

なんだかんだでゴシック体を並べただけ、空白もテキトー、そういうポートフォリオをまだよく見るのでそこを修正するだけでも見栄えは随分違ってくると思います。

 

あと、英語はgoogleフォントでもそこそこ見栄えが良いものがあるのですが、日本語になるとこれが難しい。

そういう時はサイトの雰囲気を大事にするために、ロゴやタイトルなど透過pngで文字を作ってしまった方が早いこともあります。

 

ちなみにWindowsの方(少数派でしょうが)
フリーフォントをDLして解凍したもの(拡張子がotf、ttfなどが多い)を、右クリックで「インストール」するだけでそのフォントがすぐに使えるようになりますよ!

 

写真

デザイン考え中のほとんどの時間が写真探しです。

素人が下手にデザイン考えるより、素敵な写真1枚あったらそれだけでサイトの雰囲気がキマるので探さない手がありません。

1枚のバナーを作るために10枚20枚試すこともよくあります。絶対妥協しません。

 

そして、写真を撮ってきたらどの角度がキマるか、どこを切り取るか(トリミング)も結構重要視してます。「うちの子どの角度から見たら可愛いかな~!?」的な感じでOKです。

 

例えば、DLしてきた写真そのままのこれより、

 

こっちの方がインパクト大でオシャレに見えませんか。
(印象を強くするために元写真からちょっと目の色も変えたりしてます)

写真を探す時間が相当長い上に写真をトリミングしたり、特定部分以外はぼかしを入れたりなど色々と試すのでとにかく時間がかかります...。

 

神様

いつも言うんですが、

 

デザインは神様が降りてこないと無理。

 

神がいつまで経っても来ないとバナー1枚に1時間以上かかるし、神が降りてきたら一瞬で終わるし、本当に難しい。

だから神が来るのを願って、あれこれ写真を変えたり色を変えたりフォントを変えたりしているというのが正しいかもしれません。

多分ガチのデザイナーさんに言わせると、ある程度デザインは理論で詰められるものだと思うのですが、私にはそんなものはないのでひたすら祈ってます。

 

ただ、デザインにおいては「神は細部に宿る」、これ絶対です。

神は1pxの隙間に住んでいます。だからカーニングや余白調整に物凄く時間をかけている訳です。

 

おまけ:色について

実は色に関しては、全く本当に心の底から無知です。
からーこーでねーたーとか考えたこともないくらい、色に関して苦手です。

気を付けているのは、色を並べる時に「同じ色を近づけない」、くらい…?(デザインによりますが)

 

例えばこっち(左に感触系、右に暖色系)より

 

こっちの方がキレイに見える気がしません?

 

グラデーションや色の組み合わせなどは最も苦手とするところなので、こういうサイト見たりして、もうプロにまかせます。

カラーパレット

 

ざっとこんな感じで、上記3つ(余白・フォント・写真)以外は実はアバウトだったりします。

それで私のサイトを「オシャレ!」と言って下さる方がいるということは、それだけあれば十分ということじゃないかな思うんですがいかがでしょう。

 

ウェブカツブログでかずきちさんがデザインについて書いておられますが、そちらもかなり有用なことが多く書いてありました。是非目を通されることをお勧めします、というか多分こっちの方がずっと参考になります笑

稼ぐためのWEBデザイン入門
Lesson5まであって、サイトデザインや配色、フォントの話などとても有用な情報が多いです

 

(追記)

おまけ:ちょっとだけよく見えるかもしれない小技

物をそろえてみる

デザインがバラバラっぽく見える時、多分目が落ち着きどころを探せていない状態だったりします。まん中寄せと左寄せが混じっていたり、置かれた文章や画像の配置が適当だったり。

 

例えばタイトルと文章。

 

タイトルはタイトルで目立たせる(文章とは別カテゴリ)なので、これはこれで悪くないんですが、こういう手もあります。すっきり。

 

「そこに線に沿って並べているように見える」「四角の中に並べているように見える」と脳に錯覚させるのは結構有効な手段かなと思います。

 

黒は劇薬

あれこれと色を多用するより、白黒ベースですっきりさせるのはわりとオシャレに見えます。が、意外と罠もあって、

 

黒ってキツイです。

 

黒の存在感というか重々しさというのはなかなかのものです。

「デザインが苦手」という方の制作物を見ると、h系、bやstrong、font-weight : boldのような太ゴシックを多用しているケースを割と見ます。この辺は文章で使うより、ポイントで効果的に使う方が画面がしまります。

 

例えば、ポートフォリオでよく見るこういう文章。

 

これの文字間隔、フォントの大きさ、カラーを変えてみます。

 

見栄えがマシになりました(よね?)

 

・文章のカラーを薄く変更
・「RTX2080」の文字間を詰める
・1行目、敢えて間隔を広く(ロゴ感を出すため)
・1行目、フォントサイズを大きく(ロゴ感を出すため)
・下画像の1行目「初めまして」の「初め」の間隔を調整
(デフォルトの上画像だとここだけちょっと詰まっている)
・文字を中央→左寄せに

文章の見た目だけでも、これだけ違ってきます。

ウェブカツ講座を受けられた方はお気づきかもしれませんが、実は「黒に近いけど黒じゃない」グレー系のカラーがすごくよく使われています。例えば#f6f5f5、#333、#eeeなんかがそうです。

 

 

ふんわりは味方

カーソルをホバーする時(a:hoverなど)、そのまま放置するよりも「ふんわり」を設定する方が何だかオシャレっぽく見えます。

CSSで言うところの、transition周りの設定ですね。

 

 

透明も味方

ベタで色を置く場合、透明にするだけでオシャレ感が増したりします。

cssでいうopacity的なアレです。
私はrgbaカラーもよく使います。暗い背景の文字色で、白い文字にするのではなく白の透過色を使ってみたりもよくします。

 

これのログイン画面とかあざとく狙ってきてますね!イヤラシイ。

 

ウェブカツのWEBサービス部「パスワード変更機能」なんかでふんわり降りてくるあのメニューも確か半透明でしたよね。

 

つまり「ほどよいグレー」「transition」「opacity」、これを上手く使えばちょっと見栄えが良くなるよ!というお話でした。

 

 

おすすめ記事

1

※ここではSkillHacksを購入し、実際に使った個人の感想を率直に述べています。SkillHacks主催者を誹謗中傷する意図は全くございません、予めご了承ください。   現在、プログラミ ...

2

ウェブカツで勉強を初めて約1か月経ちました。   私のツイートについているハッシュタグ「#skillhacks では実務レベルのスキルがつかなかったので #ウェブカツ で稼げる力を学び中」を ...

3

私がHTMLを覚えたのは20年ほど前のことです。 まだCSSもなく、背景がデフォルト灰色のままの文字だけ並んだホームページがまだ普通だった時代。HTMLの初心者用本というのは殆どなくて、HTML/JS ...

-勉強

Copyright© 40代主婦が、今から始めるプログラミング , 2019 All Rights Reserved Powered by AFFINGER5.