2023アドカレ12: Figmaでなるべくめくらない年間カレンダーを作ってみた

何の記事？

この記事はぐらだけアドカレ2023、12日目の記事です。

Figmaを使って、なるべく多くの月を俯瞰できる、置き型カレンダーを作りました。
この記事には、作り方や工夫した点などを書いています。

誰向け？ どんな役にたつ？

• Figmaで年間カレンダーを作りたい人
• 年間カレンダーの作り方が気になる人
• Figma上で好きなフォントを使いたい人

あらすじ

日々使っている卓上カレンダーですが、毎年社内のあまりものを使っていたため、不満がありました。

不満ポイント

• サイズが大きい
• 毎月めくるのが手間
• 先月・来月の同じ曜日が見辛い
• 月表示が英語表記だとぱっと見何曜日かわからない

そんな折、ちょうど素敵なフォントセットを手に入れたこともあり、Figmaの練習がてら、自作してみることにしました。

参考リンク

Figmaで年間カレンダーを作る説明動画

すごくわかりやすかったです。
基本的な作り方はここで説明しているので、この記事よりも詳しく知りたい方はこちらをどうぞ。

めくらないカレンダーのお手本

見通しの良いずぼらカレンダーというネーミングセンスが好きです。
このシンプル感を参考に、今回は同じ曜日を見通したかったため、縦型を作ることにしました。

使ったもの

Figma

多機能で使えるデザインソフトです。
UIデザインソフトではあるのですが、汎用的なデザインソフトの機能がそろっていて、レイアウトが整ったデザインをするのに重宝するため、今回使用しました。

Split shape

Figma内で使えるプラグインです。
選択したオブジェクトを任意の分割数でわけることができます。
今回は縦４面にわけるのに使いました。

Figma フォントサービス

ブラウザ版FigmaでPCにインストールされたフォントを使う為にはフォントサービスのインストールが必要だったため、行いました。
これを入れるだけで、ローカルフォントをデザインにも適用できるようになるのでとても楽ちんです。

mojimo MOJICITY

11月に素敵フォントパックをいただいたため、せっかくなので今回使用しました。
流石お金がかかったフォントはちがう……！

何をやったか

1. カレンダーのラフイメージを書く

＜フリーボードの画像＞
手を動かしながら作っていくのでもよいのですが、完成イメージがあった方が、次項の日付パターンを作ったり、繰り返しパターンを上手く使って作っていけるので、書き出しておくとよいと思います。

2. 日付パターンを作成する

平日・休日・来月……などの日付表示パターンを作ります。
日付を組むときにここで作ったコンポーネントを組み合わせておけば、後からパターンは増やせます。

3. カレンダーの作り方にそって、１月毎に雛形を作成する

その月によって最終日が30日・31日と違う為、１月毎にひな形を作ります。
基本は日付を1行並べた後、同じものを１行下にコピー。日付を手動で変更していきます。
日付変更はTabキーで次の日に移動しながら入力すると早いです。

今回は月またぎで縦型に組み合わせる為、５パターン作りました。

4. 1月ごとにカレンダー紙面に配置する

ラフで書いた通りにカレンダー面を配置していきます。
途中までうるう年の存在を忘れて盛大に曜日ズレを起こしたあとに訂正したりなどがありましたが私は元気です。
最終日の曜日ズレがないか、web上の年間カレンダーなどを見て細目にチェックしながら作るとよいと思います。

5. 祝日を設定する

無事、正しい曜日でカレンダーが並んだところで、祝日を赤字に変更します。
コンポーネントに祝日を作っておいたので、１つずつ探して手動で変更します。

6. フォントを選ぶ

デフォルトのフォントでデザインが完成したあと、フォントを変更します。
平日や祝日などを分けた後でも、元のコンポーネントのフォントを変更すれば反映されます。

7. 印刷して手直しをする

印刷してみるとなんか違う……ということがあるので、印刷して微調整をします。
私はレイヤ設定を間違えて日付がみえなかったり、折り線があった方が印刷後に組み立てやすいので折り線を追加したりなどしました。

結果

めくらんカレンダーが完成しました！　やったー！！！

カレンダー仕様

• 3か月x4面＋前後1か月（なるべくめくらないスタイル）
• 曜日が月をまたいで一列に並ぶ（毎週〇曜を追うのが簡単）
• 曜日表示が日本語
• 日火木土に色があるので曜日がわかりやすい（……といいな）

ざーっくり日付を見るのに適したカレンダーになったかと思います。
我ながらなかなかよい仕上がり……！
ここからまだ加工をしたいので、データはここにはあげませんが、もしも使いたい方がいらっしゃればXやコメントなどでご連絡ください。配布を考えます。

検討したけどやらなかったこと

• 今日何日？をクリップなどでつけられるように
• 今月の営業日が何日かがわかる
• 今日、今年の何週目？がわかる
• 年間休日が反映できる

色々機能をつけようか悩みましたが、印刷してみたらそんなに余白もなかったので、機能を削りました。

応用

来年も同じ要領で作れる

曜日がズレるだけなので、来年も調整したら同様のデザインが作成できます。
……と思ったらうるう年だった。 ……ま、まぁ微調整だけで作れ……ると、思います。

使い終わったら簡単に捨てられる

これは参考にさせていただいたずぼらカレンダーさんと同じにしました。
A4コピー用紙で作って、使い終わったらそのままゴミ箱へ！……ができる手軽さは自作カレンダーならではかと。

コンポーネントのバリエーションを増やすといろいろできる

年間休日のお盆休みや、請求書締の五十日、休日出勤日などを追加するのもよいかと思います。
私は給与支払いが月末最終営業日なので、最終営業日を目立つようにここから加工します。

使おうとしたけどあきらめたツール

Excel標準カレンダー

Excelのテンプレートで年間カレンダーが作れるので、そのカレンダーの数字だけFigmaに引っ張ってきて、Figmaの中でデザイン部分を加工できないかな～……と思ったのですが、Excelからコピペをすると、コピーしたセル範囲のjpgが貼り付けされてしまう為、あきらめました。