見出し画像

2022年9月のインプット・アウトプット

あかね

こんにちは！@aknecco です。今月も振り返り、やっていきます。
先月の振り返りはこちらです。

今月やったこと

MdN × Bauya「知る・作る・使う 文字とビジュアルデザイン概論＋作字ワークショップ」に参加

装丁家・書体デザイナー山田和寛さん( @ymdkzhr )の作字ワークショップに参加しました。

前半は講義形式で、文字とは？作字とは？という解説から始まり、書体デザインの歴史を勉強しました。
後半はワークショップ形式になっていて、ある紙面のレタリングの特徴を読み解き、実際に手を動かして楽しく文字を作りました。

参加した感想として、めっっっっっちゃくちゃ良かったです……！！！！！

今まで和文書体の歴史を調べたことがなかったですし、文脈を読み解いて作ろうとか筆運びがどうなるかなんて考えず、崩し方も適当でした。そんないい加減だったやり方を正してもらえたような、例えると曲がりくねったレールが一直線に舗装されていく感覚がありました。
またワークショップの課題に取り組むことでその時代のトレンドや文字の特徴を知ることができましたし、限られたスペースに文字を配置していく構成力・レイアウトする力も養われました。

さらにワークショップの課題を提出して、先生に講評をいただくこともできました。その講評内容も丁寧・的確にしていただき、とても勉強になりました。
自分が作ったものをブラッシュアップするときに1番難しいと思うのが、違和感はあるけど、何が悪いのかわからないことです。「なんとなく違和感がある」で終わってしまって、根っこを探すのが難しいです。課題を通して、自分を客観視できてないなぁ……と思いました。

また講評だけでなく、フォローアップも充実していました。あたたかいフォローアップメッセージから、膨大な参考資料のリスト。何冊か購入して読んでみたいと思います。

総括すると、自分の成長を実感できたとても良い講座でした。
ものごとをよく観察・分析し、特徴をつかんで自分のデザインに活かすという考え方はどんなデザインにも応用できると思いました！

すごく楽しかったので、ワークショップの課題とは別で、自主的に文字を作ってみました。昭和の作家、夢野久作の『死後の恋』という短編小説をイメージした文字です。
ワークショップの配布資料に掲載されてた参考デザインを分析しながら作ったので完全オリジナルではないのですが、作っててすごく楽しかったです！

CSS設計の勉強

ずっと取り組んでいたデザインカンプが完成しました！👏
そのコーディングに入る前にShibajukuのCSS設計講座を勉強したり、HTML講座の復習をしました。

  • Shibajuku CSS設計講座 #1～#4

  • 『柴犬でもわかるFLOCSS』

ShibajukuのCSS設計講座は、CSS設計とは？からOOCSS、SMACSS、BEM、FLOCSSなどの主要なCSS設計のフレームワークの紹介や、カンプとSassファイルを見ながらどうやってクラス名を付けていくかという内容になっています。講座内で解説されていない内容を補うためにFLOCSSの書籍も読みました。

ただ、実際に使うとなると難しくて手が動きません。難しく感じるのはたぶん、必要性を理解できてないからかなぁと思います。コーディング経験が浅く、なぜCSS設計が大切なのか理解できていないので、必要性がわからず難しく感じるのかな……。
なので、一旦コーディングを終わらせてからリファクタリングする方向へ転換しました。色々なサイトのソースコードを覗いて分析もしてみようと思います。

HTMLの復習

HTMLをもう一度復習しました。一応、Shibajukuのレスポンシブサイトを作る課題には合格しているのですが、それ以来まともにコーディングをしてこなかったせいで苦手意識が芽生えました。

Shibajukuの教材で

  • 見出し、段落、リスト関連、テーブルのマークアップ

  • セクショニングコンテンツやアウトライン構造を考慮したマークアップ

  • HTML5からLiving Standardへの仕様変更

などを復習し直したり新たに知識を入れたりして、

かろうじてレスポンシブサイトを作れる
↓
勉強しなさすぎて苦手意識芽生える
↓
HTMLが書ける(New!)

レベルには、回復しました(と思いたい)。

読んだ本

今月も本を読みましたのでご紹介します。

『日本のロゴ&マーク集 vol.6』

2016〜2021年までに制作されたロゴマークと、その実例写真が掲載されています。モチーフのロゴ、英数字のロゴ、日本語のロゴとカテゴリーが3つの章に分かれてます。
こういうロゴの本はタイポグラフィ年鑑もあるのですが、タイポグラフィ年鑑と違うところは、エンタメ系も載っているところと、実例が豊富に掲載されているところだと思います。漫画のタイトルロゴなども掲載されてて面白かったです。展開例がたくさんあるので、印刷物のパッケージ展開を考えるときに参考になりそうです。

『レタースペーシング　タイポグラフィにおける文字間調整の考え方』

8月の記事のアイキャッチを作ったときに文字間がうまく調整できなかったので、スペーシング苦手なのを克服せねば！と読みました。
文字間を調整する方法が丁寧に書かれていて、例も豊富なのでとてもわかりやすいです！！感覚的にやりがちな処理をしっかり掘り下げて言語化してくださっているところがすごいと思いました。ちなみに欧文・和文書体両方取り上げています。またブランドロゴの実例と解説が載っていたり、巻末には実際にスペーシングに挑戦できる実践問題も掲載されています。

『レタースペーシング』を読んですぐ、アイキャッチの文字間を調整し直してみました。

上から順番にベタ組、『レタースペーシング』を読む前に自分で調整したもの、読んだ後に調整したものです。
カタカナというか和文書体の調整が難易度高すぎて泣きそうになりました。めちゃくちゃ難しかったです……。
上段・中段は文字間がゆったりめなのに対して下段は詰まっているので、下段の方がより「インプット」と「アウトプット」が単語として認識しやすくなっているかな？と思います。

9月の目標到達度

  • CSS設計を勉強する
    →勉強した！けど使えてない

  • コーディングに着手する
    →トップページのHTMLまで完了

  • 並行してデザインのインプット・アウトプットもする
    →講座や本で勉強したことを実践してみた

10月の目標

デザインをもっと勉強したい！

1. デザインのスキルを磨く

具体的には、

  • 自分が良いと思うサイトを模写
    フォント、配色、余白感、レイアウトのバランスを鍛える

  • サイト分析
    「なぜ？」を常に考える

  • 本を読む
    知識をインプット

  • デザインのアウトプット
    模写・分析で得た知見、インプットしたものを自分のデザインに活かす

10月はこのサイクルを意識してやってみます！

2. コーディングもがんばる(小声)

こつこつやっていきます……。

9月のまとめ

9月は作字のワークショップに参加して書体デザインを勉強したり、コーディングの勉強をメインに取り組みました。

ここまでやってきて、やっぱりわたしはデザインが好きなのだと実感しました。今はデザインスキルを磨いていきたい気持ちが強いです。

色々と迷走していましたが、やりたいことがだんだんと固まってきたので、これがやりたい！＆できます！と採用面接時にアピールできるような成果物を作っていきます！！

これから会社が繁忙期に入るのでまとまった時間が取りづらくなるのですが、無視して頑張りたいと思います！！
ここまでお読みいただきましてありがとうございました。

この記事が気に入ったらサポートをしてみませんか？