スマホのロック画面にカレンダーを配置したいので、スマホでカレンダーを手作りできないかと色々な方法を探していました。
カレンダーウィジェットなどもあるんですが、デザインのアレンジのしやすさはあまりありません。
またCanvaなどのデザイン用アプリは、スマホではオリジナルの写真やイラストに完成しているカレンダーをはめ込むというもので、一からカレンダーは作れませんでした。
それでも、好きな背景にカレンダーをはめ込んでロック画面にすることはできます。
でも私は、自分の好みの色合いやフォントでカレンダーを手作りしたいと思っていました。
それで色々と試してみたところ、アイビスペイントが一番カスタマイズしやすかったです。
こんな感じにロック画面に設定できます。
そこで、今回はアイビスペイントを使ったオリジナルカレンダーの作り方を紹介していきます。
スマホでカレンダーを自作してみたい方は参考にしてみてください。
アイビスペイントでカレンダーを作る
では早速アイビスペイントでカレンダーを作っていきます。
アイビスペイントがスマホにない方は、無料なのでダウンロードしておきましょう。
アイビスペイントを開き、「マイギャラリー」→左下の「+」マークをタップします。
そして「新規作成」画面でキャンバスサイズを選択します。
カレンダーを作るので、「1:1」の真四角を選択します。
サイズが小さいと画質が悪くなるので、数字をタップして2048×2048以上にするとスマホのロック画面で綺麗に表示できます。
表を追加する
キャンバスが開いたら、画面の下の左から2番目のブラシのアイコンをタップし、メニューが出てきたら「フィルター」をタップします。
フィルターの下の「フレーム」をタップして、出てきたフィルターの「表（数）」をタップして選択します。
するとキャンバスに表が表示されます。
「列数」と「行数」のスライダーを動かすと表の線の数を増やしたり減らしたりできます。
カレンダーにするので、横が7段、縦は曜日を入れると7行になります。
ここで縦の列の中心にもう一本ガイド線を入れると文字を配置しやすいので、ガイド線を入れるときは縦の「列数」が14列になるようにスライダーで調整します。
横線の「行数」は7で大丈夫です。
この表の罫線は文字を綺麗に配置するためのガイドで、最後に非表示にするのでカレンダーには表示しません。
もし罫線をカレンダーに使いたいときは、この記事の後半で紹介しているので参考にしてください。
調整ウインドウを上にスライドさせ、「上余白」のスライダーを調整すると表の上部にスペースができ、月名などを入れるためのスペースを空けることができます。
できたら調整ウインドウの右上の緑のチェックマークをタップします。
キャンバスに表が追加されたらフィルターの上の「×」をタップして戻ります。
曜日を入れる
次に表の上に別のレイヤーを追加してテキストでカレンダーの曜日名を入れていきます。
画面の下の右から2つ目の「1」と書かれた四角の「レイヤー」アイコンをタップします。
レイヤー画面が開いたら、左にある「+」マークをタップすると現在のレイヤーの上に新しいレイヤーが追加されます。
もう一度レイヤーアイコン（レイヤーを開いているときは「2重V」をタップして戻ります。
新しいレイヤーが選択された状態（青く囲まれている）で、下の2重の「V」になったレイヤーマークをタップしてキャンバスに戻ります。
線を追加したレイヤーにカレンダーを描かないように、必ず新しいレイヤーを選択してください。
今は表のレイヤーではなく、上に重なっている何もないレイヤーに描ける状態です。
下のツールの「ブラシ」アイコンをタップし、「T文字入れ」をタップします。
するとブラシアイコンが「T」になり、テキスト文字を追加できるようになります。
これでキャンバスのどこかをタップすると「文字追加」の吹き出しが表示され、その吹き出しをタップすると文字入力のウインドウが表示されます。
文字入力ウインドウをタップするとキーボードが表示され、文字を入力できます。
文字入力ウインドウに曜日名を入れていきます。
日本語でも英語でも何でもカレンダーに入れたい好きな文字でいいです。
私は英語の3文字で入力していきます。 まずは日曜日から入力します。
キャンバスが上の方に移動してしまって文字が見えないときは、キャンバスを見える位置まで指でドラッグして移動させ、文字の大きさなどを確認します。
文字のウインドウの下のメニューでフォントや文字の大きさ、色などを調整します。
日曜日を赤にしたいので、色を変えます。
文字色の変更は下の「スタイル」をタップし、「文字色」の四角の色の部分をタップするとパレットが表示されます。
色の変更は「パレット」と「ホイール」、「スライダー」でできます。
「パレット」なら、すでにできている色を選択するだけなので簡単です。
ない色を作りたいときは「ホイール」や「スライダー」で作れます。
文字の大きさは「サイズ」をタップしてスライダーまたはスライダーの両脇の＋と－ボタンで調整します。
「文字間隔」をタップすると、文字と文字の間隔を調整できます。
調整が終わったら、文字のウインドウの右上の緑のチェックマークをタップして戻ります。
するとテキストがキャンバスの中に配置されます。
2本指で画面を拡大し、テキストをドラッグしながら表の日曜日の位置になる一番上の左端に配置します。
テキストを囲む枠の周りの、上の丸い矢印と右側の矢印マークを触るとテキストが傾いたり改行されたりしてしまうので、その部分以外を長押ししながら移動します。
14列にしたときは2列で1日分なので、2列の真ん中の線を中心にして下の線に合わせて配置すると綺麗に配置できます。
指が邪魔で位置が見にくいときは、できるだけ画面を拡大すると見やすくなります。
配置できたらキャンバスの他の場所をタップすると枠の線が薄くなって位置が決定します。
配置したテキストを修正したいときは、テキストをタップするとまた枠が出るので、枠の周りのペンのマークをタップすると文字を編集できます。
キャンバスの別の場所をタップするとまた文字入力のウインドウが出るので、同じようにして他の曜日を追加します。
テキストは一つ前に入力した文字の色と大きさの設定になっているので、曜日で色を変えたいときは、テキスト編集のボタンをタップして色を変更します。
私は日曜日の色を赤にしてみました。
土曜日を青にしたり、全部黒でもシンプルでいいですね。
日付を入れる
次に日付を入力するので、下のレイヤーのアイコンをタップし、レイヤー画面で「+」マークをタップしてレイヤーを追加して選択し、キャンバスに戻ります。
レイヤーはできるだけ分けて編集すると、後で修正や編集がしやすいです。
曜日名は同じレイヤーにし、日付は別のレイヤーにするなどです。
これは便利.comさんの2025年の2月のカレンダーです。
このカレンダーを参考に日付を配置します。
画面の下のブラシアイコンをタップして「Ｔ文字入れ」を選択します。
そしてキャンバスをタップして「文字入力」のウインドウに「1」と入力します。
緑のチェックマークをタップするとキャンバスに数字が配置されてキャンバスに戻ります。
画面を拡大してカレンダーを参考に「1日」の位置に数字をドラッグして移動します。
2025年2月1日は土曜日なので、土曜日の列の一番上に配置します。
カレンダーの日付は、桁で位置を揃えているものや真ん中で揃えているものがあります。
桁を揃える場合は、1桁目を揃えると綺麗に見えます。
日付の配置は好みで好きな揃え方になるように配置してみてください。
こちらは1桁の日付を真ん中でそろえたものと、一桁目でそろえたものです。
参考にしてください。
一桁目でそろえるとちょっとガタガタと曲がって見える気がします。
いや、実際に私の配置が曲がってますね。
数字の中心を縦でそろえると綺麗に見えます。
続けて「1日」と同じ縦の列の日付を配置していきます。
1日の下は、8、15、22、29日になりますが、今回は2月なので29日は入れません。
または、日付を入れたら29日の文字色を背景と同じ白にして見えなくしておいて、別の月のカレンダーを作るときに色を黒などに変えてもいいと思います。
真ん中で揃えてみました。
テキストの位置はテキストをタップすると修正できます。
また、テキストのレイヤーを選択しているのにテキストを選択できないときは、下のツールがブラシツールになっていたりするので、「T文字入れ」にするとテキスト選択ができるようになります。
この「1日」の列を配置したレイヤーには、この列だけを配置し、別の日付の列は新規レイヤーを追加してその列の日付だけを入れます。
すると日付のレイヤーが7つできます。
こうすれば、月が替わってカレンダーを修正するときに、列ごと移動できて簡単になります。
別の月を作るときに日付の列を移動するときは、下の左から2つ目のブラシ（Ｔ（文字入れ））アイコンをタップして、「移動変形」をタップします。
するとそのレイヤーの文字全体が青い枠で選択され、列ごとドラッグで移動できるようになります。
下のウインドウの緑のチェックマークをタップすると位置が固定されます。
こんな感じで、他の日付の縦の列も同じように1列ずつ別のレイヤーに作っていきます。
月名を入れる
日付が入力できたら、カレンダーの上のスペースに月名を入れます。
新規レイヤーを追加し、テキストを選択して「2月」を入力します。
英語の頭文字3文字で「Feb」も入れました。
文字のフォントや大きさや色を選択して配置します。
「2025」も入れてみました。
表を非表示にする
最後に表の罫線を非表示にします。
線を非表示にするには、レイヤーを開いて表を入れたレイヤーの目のマークをタップします。
すると目のマークが白くなり、表のレイヤーだけ非表示になって線が消えます。
罫線を非表示にするとこんな感じです。
次の月のカレンダーを作成するときに、また目のマークをタップして表示させて日付を配置してください。
文字を修正したいとき
ちょっと微妙に位置がずれてるところは手作り感があるということでいいとは思います。
でも修正したいときはいつでも修正ができます。
テキストの位置を修正するときは、その文字が入ったレイヤーを選択し、下のブラシツールを「T文字入れ」にし、テキストをドラッグして修正します。
罫線を追加する
カレンダーに罫線を追加することもできます。
これはガイド線ではなくて、カレンダーの一部になる線です。
新規レイヤーを追加し、ブラシアイコン→フィルターとタップし、表（数）を選択します。
列数と行数を7にし、上余白のスライダーを調整すると横の罫線の幅が調整できるので、日付がうまく収まるように調整します。
カレンダーを保存する
カレンダーが完成したら、画像を保存します。
右下の←左向き矢印をタップし、「画像を保存」をタップします。
ファイル形式はPNGで、「透過」のスイッチをオンにして「OK」をタップします。
透過をオンにすると、背景が透明の文字だけのカレンダーになります。
このカレンダーを画像の上に重ねると、数字だけが画像に重なります。
もしこのまま白い背景で保存したいときは、透過はオフで保存して下さい。
保存するとスマホのアルバムに保存されます。
保存したカレンダーはアイビスペイントやLINEカメラなどで写真や画像に貼り付けてオリジナルカレンダーを作ることもできます。
31日が無い月で文字を白にして背景を透過すると、白以外の背景だとこんな風に文字が白く見えてしまいます。
なので、背景が白以外の画像にカレンダーを重ねるときは31日の文字を消すといいです。
31日のある月にまた「31」を入力すればいいだけです。
または、画像を保存するときに透過をオフにすると白い背景で保存されて、こんな風にカレンダーが白く表示されます。
LINEカメラで自作のイラストの上に背景を透過したカレンダーを重ねるとこんな感じです。
画像にカレンダーの枠が重なっても画像が隠れないので、ギリギリまで文字を近づけて配置できます。
背景が白なら「31日」が白い文字でも見えません。
レイヤーに名前を付ける
レイヤーに名前を付けておくと、別の月のカレンダーを作るときなど、テキスト選択や移動するときにどのレイヤーを選択するかがわかりやすくなります。
レイヤー名を変更するには、レイヤーを開いて名前を変更したいレイヤーを選択し、右下の縦の「…」をタップして「レイヤー名を変更」をタップします。
レイヤー名を入力するウインドウが出たらレイヤー名を入力します。
日付のレイヤーなら、「1日～29日」、「6日～27日」などにするとわかりやすいと思います。
入力したら「OK」をタップします。
別の月のカレンダーの作り方
毎月カレンダーを作りたいときは、また一から作るのは面倒なので、前の月のカレンダーを修正して作ります。
縦の列ごとにレイヤーを分けてあるので、次の月のカレンダーを作るときは列を並べ替えるだけです。
並べるときに位置をわかりやすくするために、非表示にした表の罫線のレイヤーを表示させます。
レイヤーを開き、表のレイヤーの目のマークをタップするとカレンダーに罫線が表示されます。
次に、日付の縦の列を移動させます。
レイヤーを開き、まずは「1日～29日」のレイヤーを選択してキャンバスに戻り、下のブラシアイコンをタップして「移動変形」をタップします。
すると1日から29日の縦の列だけが青い枠で選択されてドラッグで移動できるようになるので、カレンダーを作る月の「1日」の列に移動させます。
移動する列に別の日付がありますが、気にしないでとりあえず重ねて配置しましょう。
あとで微調整してください。
7日までの全部の列を移動させたら、曜日に合わせてテキストの色を変更します。
日付の色を休日の色や平日の色に変更するときは、レイヤーを開いて変更したい日付のレイヤーを選択して戻り、下のブラシアイコンをタップして「T文字入れ」をタップします。
すると選択した列のテキストを囲む枠が薄く表示されるので、色を変更するテキストをタップして（①）、枠の周りのペンのマークをタップ（②）します。
するとテキスト編集のウインドウが表示されるので、ウインドウ下の「スタイル」をタップして文字色の四角をタップして色を選択します。
30日や31日が無い月の場合は、その日付を消してもいいんですが、また入力するときに位置を合わせるのが面倒なので、テキストの色を背景と同じ色にしておくと、また使うときに色を変更するだけなので楽です。
カレンダーをロック画面に設定してみる
このカレンダーをアイビスペイントやLINEカメラで待ち受け画像サイズのキャンバスに追加するとこんな感じになります。
背景が白だと、iPhoneでは画面の上のバッテリー残量などが見えにくいので、そのあたりだけ色を塗ってみました。
スクリーンに対して画面ギリギリより、少し小さめに真ん中寄りにするとロック画面に設定しやすいです。
この画像を待ち受け画像にすれば、ロック画面にカレンダーを表示出来ます。
月と日付の間に一本の線を挿入してみました。
まとめ
カレンダーを手作りすると好みのデザインにする事ができるし、作るのも楽しいです。
作り始めると無心になれます。
デザインの自由度が高く、カレンダーに予定を入力することもできます。
1ヶ月ごとに待ち受け画像を変えたり、2ヶ月分を貼ってもいいですね。
待ち受け画像だけじゃなく、プリント用紙に印刷してカレンダーを作ることもできます。
今回の方法はカスタマイズが自由自在なので、オリジナルのカレンダーを作ってみて下さい。
コメント