76日目 - プログラミング備忘録

VScodeで簡単に書けるようになる拡張機能があるらしく、そちらを導入して作成。

とても作りやすく、簡単に画像として出力ができた。

f:id:hasegawa_note:20210804192212p:plain

間違っているかもしれないが、とりあえず見様見真似で作ってみた図。

ユーザーの投稿と、おすすめテーブルにはそれぞれ「points」というテーブルを作り、cocoonというgemを利用して好きなポイントを登録できるようにしたい。

また、好きな部分にはネタバレも含まれる可能性が大いにあるため、ネタバレかどうかのチェックボックスを用意し、その投稿を閲覧するユーザーがネタバレを確認するかどうかを任意で決められるような状態にしたいと考えている。

f:id:hasegawa_note:20210802215359p:plain

ネタバレだと設定されている場合は、該当文章をクリックすることで「表示しますか？」というポップアップを出すようにしたい。

postsテーブルに含まれているimageカラムには、楽天の商品検索APIで取り出した画像を格納したいのだが、想定していることが出来るか分からないため事前に練習アプリを作ってやってみる予定。

大竹悠介さんが開催されたデザイン勉強会に参加して、お話を伺った。

Adobe colorを参考にするとよい

カラフルにしない文字や図形問わず、使いすぎないようにする
配色は基本的に白と黒を除き、4色にする
余白をとるようにする
行間などに余白をとる。余白は統一感を出すために、上下左右でpxを揃えることを意識する。
①枠の余白
②行間の余白⇒フォントサイズの1.5～2倍
③字間の余白（8%以下）
境界線を使う場合、無意味につけずに、つける場合はガッツリとつける
境界線をつけると、ポップなイメージになるためイメージに沿わない場合は避ける
明朝体はフォーマルな時に使用されるフォントなので使わない
影は基本的につけないつける場合はうっすらとつけ、ついているのかどうか分からない程度でよい
縦横比を保つ縦もしくは横のみを伸ばさない

基本的にはPC版から大きさを事前に決める

この順で大きくするようにし、最初はテキストサイズを決める。

15～18px、最も多いのは16px。

Figma プラグイン「Font Scale」を利用し、Base sizeを指定すると、倍率（ジャンプ率）に合わせたタイトルや中見出しのフォントサイズを見ることができる。

また、フォントサイズは偶数に合わせるようにする。

もしくは、The Type Systemを利用する。

SP版の大きさは、12~16pxが主流。ジャンプ率を変更する。

ウェイトを使いすぎないくらいに混ぜる
動きを出すために、メインテキストはmedium、大見出しはBoldのように変更したりする。ウェイトが豊富なものをメインフォントにする
欧文和文を使い分ける欧文フォント、和文フォントはサイズが一致しないため注意（欧文は若干小さくなることが多い）
文字に凹凸を入れる
助詞や単位を小さくする
数字は訴求ポイント
数字は半角で使い、単位は添えるだけにしフォントサイズを変え、数字を目立たせる
欧文フォントを使う

おすすめ数字フォント
- Roboto
- Helvetica
- DIN ALternate
写真に文字を置く際はコントラスト差を意識する
写真にグラデーションをかけ、文字を乗せる場所の色合いを変更する方法もある

ついついやってしまがちなことが網羅されており、本日お聞きしたことを忘れないようにしながらサイト等の作成に当たりたいと思った。