webデザイナーとしての2023年の学び振り返り
今年も残すところ数時間ですね！いかがお過ごしでしょうか？
私は夜映画館に出かける用事があるのですが、今年の振り返りということもあり、
年内に３本目のnoteをなんとしても投稿したく急いで書き上げています、、🫥
(低気圧頭痛が続いており前日に全く書けずTT)
ざっくりした内容になりそうなので随時更新していきます🙇♀️
フォント・文字まわり
元々作字を趣味でやっているのもありフォントや文字は特に興味のある分野だったのですが、
業務に取り組む中で「全然わかってなかった」「初めて意識した」と気づいた部分も多くありました。
1.フォントの使い分け(日本語)
ゴシック体、明朝体、といった大まかな分類は置いておいて、例えばゴシック体の中でどのフォントがどんな印象を与えるか、といった違いは、なんとなく意識していたものの
そこの言語化ができていなかったり理解が浅かったことに仕事を通して気づきました。
この一年弱で理解を深められた部分もあれば、まだまだ知識が足りない部分もあるので、今の段階で書けることを簡単にまとめます。
(要素自体の解説など含めこちらが参考になります)
ふところ・重心
ふところ(文字が内側に抱える空間)が広いほどゆったりした印象になり、字面が大きくなって文字が読みやすくなります。なのでUD(ユニバーサルデザイン)フォントはふところ広めなものが多いですね。
重心は低いほど安定感が出ます。
重心を高めに、ふところを狭めにしたフォントを選ぶと、緊張感が出るそうなので、
「特別感」や良い意味での敷居の高さを演出したいときに効果的かも。エレメント
エレメントがシンプルだと読みやすく機能的な印象になります。
シンプルなエレメントのフォントはモダンな印象ですし、特に横組み、ウェブの本文などで特に読みやすく機能性が高くなります。
個人的には、墨溜まりなど程よくエレメントの装飾があるフォントは可愛くて眺めてて楽しいです🌝コントラスト
印象に加え読みやすさに大きく関わると思いますが、
主に明朝体の縦画と横画の太さの違いです。
太さの差がはっきりするほどメリハリは付きますが、本文など小さい文字サイズだと読みにくくなりがちなので使い分けが大事です。長体/平体
一般に長体の方がすっきり、平体はどっしりとして見えます。(が、これはどちらかというと欧文フォントで意識するポイントかもしれません)
感覚的に捉えていて言語化できていなかったものもあれば、言葉だけ知っていてあまり意識してこなかった部分もありますが、
「文字のどの部分がどのような状態だから〇〇な印象になっている」
など関係を説明できる程度にわかっていた方が、
書体を選ぶときにブレにくく迷いにくくなるし、バリエーションを出すときに明確な違いを出せるので、この辺り改めて意識したいと思っています✍🏻
2.ライセンスや料金の話
社内の環境で素敵な有料フォントを使える機会が増えて選択肢が広がったからこそ、
いざ案件で使ってみようと料金やライセンスの規定を改めて確認して驚くことがたまにあるので、
これからも注意しようと思ってメモしました！
(※あくまで受託制作会社にいる人間の視点と思ってください)
１フォントファミリーでいくら、パックでいくら、など価格が決まっていたり、サブスクやプランでそこに含まれている任意のフォントを使える形、
などいくつか料金形態はあるのですが、
書体を購入する形のもので割とよくあるのが
会社の規模など条件によってライセンス料金が異なるものです。
(サブスクは限られたサービスしか知らないのでたまたま見たことがないだけかもしれませんが、、)
制作会社の人数規模によってライセンスが変わるパターンはまだわかりやすいですが、
クライアント側の人数規模によるものや、
ビュー数によって料金が決まる(従量課金)ものもあるというのは働き始めてから知りました。
よく確かめずにトライアルフォントでデザインを進めてしまって、
後から確認してみたら「めちゃくちゃ高い」とか「ライセンスが微妙」みたいなことがあると、結局フォントを選定し直すことになる場合もあって困るので、この辺りも業務上大事だなと感じます。
(値段関係なく使う価値があって現実的なのであれば妥協せず使って良いと思っているので、「本当にそのフォントなのか？」と予算とのバランス踏まえて考えた上での判断が大事かと思います)
あと、１書体あたりの値段の相場感の理解も不十分な上に、欧文フォントだと海外の通貨単位でピンときてなかったりして、
「〇〇スイスフランなのか〜フーン換算してみよ」と調べたらやはり「めちゃくちゃ高い」になることもありました。。
書体によってそれぞれではあると思うのですが、このボリュームでこれは高いな、とぱっと見で判断できることも現実的な部分を考えると大事だなと。
figmaの使い方
基本的な操作は簡単な分、
使い方次第で見せ方を変えたり便利にできたりする余地の多いツールなので、
常に色々試行錯誤していきたいなと改めて思います。
プロトタイプ・アニメーション
プロトタイプでゴリゴリアニメーション付きのカンプを作る、みたいなことがあまりできなくて勉強中なのですが、
言葉で説明しにくい表現はプレビューでスムーズに伝えていきたいのでできることは増やしていきたいです💡
ちょうど最近気づいて取り入れてよかったのは、エリアを限定してコンテンツを追従させる動きのプロトタイプかなと思います👀
・あるエリアだけサイドバーを固定にしたい、
・画像を固定させた横でテキストがスクロールして流れる演出を再現したいというときに試したのですが(細かい説明は一旦割愛します)、
要するに「要素の親になるフレームを作り、その中に子要素を入れることで追従させるエリアを制御する」というやり方です。
子フレーム内に上パディングを入れておけば常に上に空間がある状態で固定させることもできます。
些細なことですが追従するのとしないのとで印象や使いやすさが結構変わる場合もありますし、知らなかった人がもしいたら試してみてください〜
親フレームを基準に挙動が決まる特徴自体色々と応用できそうな気がするので、試行錯誤してカンプも充実させていきたいです！
variablesはもっと活用したい
機能が出てきた時に興味あって色々いじっていたものの結局使いこなしていません。。
実際仕事上は使う必要がないことも多いんですが、
色々見ているとプロトタイプ作るのに便利だったり、できることが増えたりしそうでまた気になっています。冬休みこそ、、
全てわかった上で取捨選択したいのでとりあえず機能を理解するよう頑張ります🧩
レスポンシブ時の想定
まずPCトップの一枚をデザインすることが多く、そこに必死になるので他の画面や幅が違う時の見え方からつい意識が離れがちなのですが、
異なる画面幅での見え方や実装の負荷は当たり前に意識できないといけないと思いました。
簡単に意識できるのはカラム数をむやみに増やさないことだと思います。
全体が１カラムレイアウトでも、部分的にコンテンツを横並びにして変化をつけたくなる時があるのですが、
一定のコンテンツ幅がないと横並びのレイアウトが成り立たないケースなどもあって(商品一覧など単純な横並びやテーブルレイアウトなら横幅に応じてカラム数を変えてもらうこともできますが)、
そうした場合、
デザイン制作時の横幅を下回った時にすぐカラム落ちさせなければならず、労力の割に想定したレイアウトがほとんど生かされなくなります。
コンテンツ幅が狭い、実装の期間が少ないなど条件によっては１カラムでシンプルに見栄え良くすることを心がけたいです。
レイアウトの組み方
情報や飾りが多くてもレイアウトがしっかり組めていれば安定するので、
レイアウトこそ重要なはずなのですが、まだまだ課題があると感じます。
多少慣れてきてとりあえず１パターン収まり良く作れたとしても、
バリエーションを増やしたり、全く違うデザインに作り替えたい時に、そのレイアウトからなかなか意識が離れられません。、
一度更地にして一から考え直すことのハードルもまだあるし、同じ情報を違ったレイアウトで組む引き出しが不足していると感じます。
来年は目に見える成果をもっとあげたいので、冬休み中に勉強しておきたいです✍🏻
昔同僚と狂ったようにやってた、レイアウトの感覚を養う練習。白紙の上で気持ちいいと感じる箇所に5個の点を打つってやつなんですが…久々にIGのストーリーでやってみたら、なんか捗ったし良い暇潰しになった。笑 pic.twitter.com/q2V6DmAOfc
— 神様｜MEFILAS (@kamisama1220) December 12, 2023
これもやってみよう。。
特に役に立つ情報はなさそうですが今年(特に後半に)学んだことと、学び足りないと感じたことの振り返りは以上です！
業務に関わることで気づけて有意義だったこともあれば、もっと早くから自覚して学んでおきたかった部分も多くありました。。
勉強しながら働ける環境に感謝です。
上でも書きましたが来年は目に見えた成果が上げられるよう、足りない部分を時間のあるうちに意識的に補っていきたいです🔥
それでは来年もよろしくお願いします！良いお年をお迎えください👋🏻
この記事が気に入ったらサポートをしてみませんか？