（このドメインでは）お久しぶりです。たぬきっつぁん（<a href="https://twitter.com/tanukizzan" target="_blank" rel="noopener noreferrer">@tanukizzan</a>）です。6月からやろうやろうと後回しにしてきたブログリニューアルを、やっと完成させることができました。<blockquote class="twitter-tweet">ヘッドレスCMSの意味がやっと理解できた！ 静的サイトジェネレーターで作ったサイトの記事管理をGUIでできるってことか、めっちゃ便利じゃん 今度MicroCMS+Next.jsでブログ作ってみるか<a href="https://t.co/rvrlywwAD2">https://t.co/rvrlywwAD2</a>&mdash; たぬきっつぁん (@tanukizzan) <a href="https://twitter.com/tanukizzan/status/1532723303650955269?ref_src=twsrc%5Etfw">June 3, 2022</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>このツイートの通り、コンテンツ管理にmicroCMSを、静的サイトジェネレーターとしてNext.jsを使用して作りました。具体的な構築方法は追々書くとして、今回はブログのコンセプトとブログを作り直した経緯を書こうと思います。<h2 id="h2b2f55b371">コンセプトは「見たことないけど見慣れたサイト」</h2>ぶっちゃけコンセプトは後付ですが（笑）、どのページにもiPad風のサムネイルを設置してどこのサイトでも見たことない（あったらすみません）ようなデザインにしてみました。<blockquote>個人的には気に入っているんですが、評判悪かったら変えます（笑）少し奇抜なデザインを取り入れるのってちょっと勇気入りますよね</blockquote>iPadを持っていても持っていなくても、PCやテレビなどで縁がある画面は見慣れていると思うので、どこか既視感があって親しみやすいと思います。そんなサイトを目指して作ってみました。本当はもっといろいろなガジェットの意匠を施してみようと思ったんですが、それも追々やろうと考えています。ブログの内容としては主にWeb開発の技術記事やガジェットの話を書こうと思っています。今までは主に<a href="https://note.com/tanukizzan" target="_blank" rel="noopener noreferrer">note</a>にガジェットのことは書いていましたが、今後はこちらにも書こうと思います。<h2 id="hdf21df52e5">Next.jsでブログを作った経緯</h2>ただブログを始めるだけならWordPressやnoteなど手段はたくさんあります。実際数年前にWordPressでブログを作ったことがあったんですが、管理画面があまりに重たすぎて書く気が起きず、3ヶ月でやめてしまいました。そこでnoteを始めました。今も時々記事を書いていますが、書くことに専念できるUIでとても気に入っていました。でもせっかく<a href="https://tanukizzan.com/" target="_blank" rel="noopener noreferrer">tanukizzan.com</a>のドメインを持っているので、「WordPress以外で独自ドメインのブログ作りたい！」と思ってしまいました。調べたところ静的サイトジェネレーター（以下、SSG）と呼ばれる仕組みがあることを知って、昨年HugoというSSGを使ってブログを作りました。当時はmicroCMSのようなヘッドレスCMS自体を知らなかったので、Markdownで書いてgitから投稿するのが非常に面倒で2本だけ投稿して放置していました。（この記事の前に投稿されている記事は当時の記事をインポートしました）<h3 id="hda1871d830">友人「Reactはいいぞ」</h3>そんななか今年に入って、高校時代の友人のススメでReactとTypeScriptを始めることになりました。いきなりこれでブログを作るのはハードルが高いので、とりあえずなにか簡単なものを作ってみようと思い、まずは高校生の時に作ったWebアプリ一覧サイト（<a href="https://app.tanukizzan.com/" target="_blank" rel="noopener noreferrer">app.tanukizzan.com</a>）をReactでそっくり作り直すことにしました。それまではJavaScriptすら使わずHTMLとCSSだけで作っていましたが、もともとカードデザインだったこともありReactと相性が良くちょうどいい題材でした。またTailwind CSSというCSSフレームワークもその友人に教えてもらいました。今までCSSは脳死でベタ打ちしていたのであまりに簡単に書けるものだから驚きました（笑）<h3 id="h30858c48b5">友人「Nextもいいぞ」</h3>さらにNext.jsもいいぞと教えてもらったので、次は放置していたブログのリニューアルも兼ねてブログを作ることにしました。やっとこのブログにたどり着きました（笑）ついでだから記事が更新しやすいように、microCMSというヘッドレスCMSも使うことにしました。<blockquote>ヘッドレスCMSはWordPressとは違ってコンテンツ管理とフロントエンドが分離しているのが特徴です。</blockquote>記事更新はブラウザで専用の投稿ページから行うため、Git操作が必要なくなるので自分の要件にぴったりでした。実際作ってみると、Next.jsの仕様でつまづいたのはSSGかSSRかの違いくらいで、それ以上にTypeScriptの型でつまづきました。（初心者プログラマーあるあるなのかな？）未だに自信はないですが、始めたての時よりは理解できるようになったと思いたいです。それから今回もTailwind CSSを導入しましたが、最終的にはそこそこ普通のCSSも書きました（笑）iPad風のサムネを作るために疑似要素（::after）を使う必要があり、Tailwindで書くのが面倒だったので普通のCSSで作ったら、いつのまにか他の部分もCSSで書きたくなってしまい、気がついたら結構な量を書いてしまいました。（CSS書くのなんだかんだ楽しい）一部大きなレイアウトなどでTailwindも併用しているため、混在している形に今のところなっています。そのうちルールを決めてなんとかしたいです。ちなみにホスティングはCloudfrare Pagesを使用しています。途中までVercelで作っていましたが、商用利用ができないようなので今後のことも考えてCloudfrare Pagesにしました。<h2 id="ha214098e44">まとめ</h2>最初に完成したと言いましたが、実際はまだ実装できてない機能もたくさんあります。（カテゴリーをつけたのにカテゴリー一覧ページがない、サイトマップ生成機能をつけてないのでGoogleに載らないなど）WordPressみたいにテーマやプラグインで簡単に設定できるわけではないので、少しずつ機能は増やしていこうと思います。Next.jsにして一番よかったことはサイトの読み込みがめちゃくちゃ爆速になったことです。トップページの読み込みは普通ですが、記事ページに遷移するときに笑っちゃうくらい早くて驚きました。<img src="https://images.microcms-assets.io/assets/b34fbdc7ac9e4a7fb17548479cef47ce/b4f3ecc90c074920a1cf6f9337bfd225/lighthouse220724.png" alt="">ちなみにLighthouseでサイトパフォーマンスを検証したら85点でした。まだ画像の最適化を行っていないので低めですが、そのうちやる予定です。ほとんど日記みたいな記事になってしまいましたが、最後まで読んでいただきありがとうございました。今後はTwitterで更新情報を発信するのでフォローよろしくお願いします！<a href="https://twitter.com/tanukizzan" target="_blank" rel="noopener noreferrer">Follow @tanukizzan</a>

（このドメインでは）お久しぶりです。たぬきっつぁんです。Next.jsとmicroCMSを使ってブログをリニューアルしました。

ブログリニューアルしました

リンク：<a href="https://app.tanukizzan.com/eva-font/" target="_blank" rel="noopener noreferrer">https://app.tanukizzan.com/eva-font/</a>その名の通り、テキストを入力するだけでエヴァンゲリオンの印象的な明朝体フォントを再現できるサイトです。WindowsとMacのChrome、iPadのSafariでのみ動作確認しております。その他スマートフォンなどでは正常に動作しない可能性があります。<h2 id="h512de7d259">使用例</h2><img src="https://images.microcms-assets.io/assets/b34fbdc7ac9e4a7fb17548479cef47ce/7aff876f8bcc4d988b8090cd81ccddd9/eva.png" alt="">↑新劇場版のフォントを真似してみた<img src="https://images.microcms-assets.io/assets/b34fbdc7ac9e4a7fb17548479cef47ce/1b4a07a45bfe46c7b8532aa31dcb572d/tokyo-eva.png" alt="">↑画像によってはシン・ゴジラ風にもなります<img src="https://images.microcms-assets.io/assets/b34fbdc7ac9e4a7fb17548479cef47ce/5d9d6259a05d485c85c222e7628b59a5/zeele.jpg" alt="">↑<a href="https://pixabay.com/ja/illustrations/%E6%B0%B7%E5%B1%B1-1%E3%83%B6%E6%9C%88-%E5%8C%97%E6%A5%B5-%E5%8D%97%E6%A5%B5-990472/" target="_blank" rel="noopener noreferrer">南極のフリー素材</a>もあっという間にエヴァ化します<h2 id="h4d849f4362">使い方</h2><img src="https://images.microcms-assets.io/assets/b34fbdc7ac9e4a7fb17548479cef47ce/c13bb56334e0447ab940f6e951ac4eb9/eva-font-site.png" alt=""><ol><li>表示したいテキストを入力します。（エンターキーを押すとすぐ表示されます）</li><li>背景を選択します。「黒」を選ぶと黒背景に白文字が、「白」を選ぶと白背景に黒文字が、「画像を選択」を選ぶと自分の持っている画像を背景に設定できます。</li><li>文字色を選択します。ブラウザデフォルトのカラーピッカーが表示されます。</li><li>フォントの垂直比率をスライダーで選択します。0.5から2まで選べます。デフォルトでは個人的に一番エヴァっぽいと思った1.3に設定しています。</li><li>フォントサイズを数値で選択します。デフォルトでは60を設定しています。</li><li>エリア内の縦の位置を選択します。上、中央、下と選べます。デフォルトでは中央に設定しています。</li><li>エリア内の横の位置を選択します。左、中央、右と選べます。デフォルトでは中央に設定しています。</li><li>決定ボタンを押すとテキストが表示されます。またテキストを表示しながら設定を変えることもできます。</li></ol><h3 id="h1f01b193e0">画像を保存したい場合</h3>端末標準のスクリーンショット機能を使用してください。フルスクリーンボタンを押して全画面表示にすることでトリミングの手間が省けますが、その代わり端末の表示領域に依存した表示になります。（iPadでは仕様上左上にバツボタンが表示されます）Twiiterへは一番下のツイートボタンから共有できます！<h2 id="hc499e4ad38">解説</h2><h3 id="h06c23d63ea">エヴァ化するためのCSS</h3><pre><code>.eva {
 font-family: "Times New Roman", "游明朝", YuMincho, serif;
 font-weight: 900; letter-spacing: -1px;
 font-feature-settings: "palt";
 transform: scaleY(1.3);
}</code></pre><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2Ftanukizzan%2Fembed%2Fpreview%2FMWbdLrJ%3Fdefault-tabs%3Dcss%252Cresult%26height%3D600%26host%3Dhttps%253A%252F%252Fcodepen.io%26slug-hash%3DMWbdLrJ&display_name=CodePen&url=https%3A%2F%2Fcodepen.io%2Ftanukizzan%2Fpen%2FMWbdLrJ&image=https%3A%2F%2Fshots.codepen.io%2Ftanukizzan%2Fpen%2FMWbdLrJ-512.jpg%3Fversion%3D1616038858&key=94335756f04b424b8ce3ce71cbe3de0a&type=text%2Fhtml&schema=codepen" width="800" height="600" scrolling="no" title="CodePen embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe>本来のエヴァの明朝体は<a href="https://fontworks.co.jp/products/evamatisse/" target="_blank" rel="noopener noreferrer">マティスEB</a>というフォントを使用されているそうですが、持っている人はなかなかいないと思うのでWindowsにもMacにも入っている游明朝を使用しました。<code>font-feature-settings: "palt";</code>という設定を今回初めて知ったんですが、日本語フォントでも英文のように隙間を詰められるようになってよりエヴァっぽくなります。<a href="https://ics.media/entry/14087/" target="_blank" rel="noopener noreferrer">ics.media</a>さんで詳しく解説されています。またエヴァのフォントは少し縦長になっているため<code>transform: scaleY(1.3);</code>で少し縦長にしています。ただ調べるとこの垂直比率は作品や場面によって変わっている（シン・エヴァより他の新劇場版の方がより縦長な気がする）みたいなのでお好みで調整してください。<h3 id="hc7b381dcaa">スマホ対応できない理由</h3>最初はスマートフォンにも対応しようと思ったんですが、Androidには明朝体フォントが入っていないためできませんでした。Webフォントを使えばいけるだろうと思い、Googleフォントの「Noto Serif JP」も試してみましたが、Webフォントを使用すると↑で紹介した<code>font-feature-settings: "palt";</code>が効かないことが判明して使えませんでした。これを設定するとよりエヴァらしくなるためAndroidでは今の所利用はできません。<h2 id="h1afe451c43">さいごに</h2>エヴァ好きな方はぜひ遊んでみてください〜<a href="https://github.com/tanukizzan/eva-font" target="_blank" rel="noopener noreferrer">GitHub</a>はこちらです

エヴァンゲリオン風フォントジェネレーターはその名の通り、テキストを入力するだけでエヴァンゲリオンの印象的な明朝体フォントを再現できるサイトです。

エヴァンゲリオン風フォントジェネレーター作ってみた

今まで自分で英単語帳を作るとなると、単語カードやノートなどに書いて覚えるか暗記アプリを使う方法などがありましたが、私は紙の単語帳で何回見ても覚えられないものをGoogleスプレッドシートに単語を書いて、「イルカの暗記シート」という赤シートをデジタル化したアプリを使って覚えるという方法でやっていました。しかし今度は単語帳に載っていない単語をふと追加したくなったときに、毎回毎回PCを開いて入力するのはなんだか面倒だなと思うようになりました。そこでGoogleフォームとGAS（Google Apps Script）を使ってスマホから英単語を簡単に登録できるものを作ってみました。少しだけスクリプトを書く部分がありますが、コピペで簡単にできるので全くプログラミングをやったことのない方でも大丈夫です。手順は以下の通りです。1. 単語帳となるスプレッドシートを用意2. スプレッドシートからgoogleフォームを作成3. googleフォームと英単語帳を連携暗記方法まで知りたい方は 4. 貯めた英単語を覚える方法 も合わせてご覧ください。<h2 id="h2523b12f61">1. 単語帳となるスプレッドシートを用意</h2>まずは英単語帳の土台を用意します。<a href="https://docs.google.com/spreadsheets/" target="_blank" rel="noopener noreferrer">Googleスプレッドシート</a>を開いて、新しいスプレッドシートを作成します。「空白」を選ぶとまっさらなスプレッドシートが生成されます。デフォルトで「無題のスプレッドシート」となっているタイトルは適当に「英単語帳」などで大丈夫ですが、左下のシート名は必ず「英単語帳」という名前にしてください。シート名の変更は「シート 1」となっているところの下向き三角形を押して、名前を変更で変更できます。早速英単語帳を作っていきます。1行目の1番最初の列から、 番号、英単語、日本語訳、例文（英語）、例文（日本語訳）という順番に入力してください。<img src="https://images.microcms-assets.io/assets/b34fbdc7ac9e4a7fb17548479cef47ce/4540006ec494444090708015ebf9d302/03.png" alt="">これでスプレッドシート側の作業は終わりです。シートの見た目の調整は最後にやるので、とりあえずはこのままで大丈夫です。<h2 id="hfa59835d86">2. スプレッドシートからGoogleフォームを作成</h2>ツールから「フォームを作成」をクリックします。たったこれだけでGoogleフォームが出来上がります。ここからはGoogleフォーム側での作業になります。まず質問内容を英単語入力用に整えていきます。デフォルトでは「無題の質問」となっている質問文を「英単語」に変更します。次に隣のラジオボタンとなっている質問の種類を選択します。ここでは記述式を選択してください。日本語訳、例文（英語）、例文（日本語訳）用の質問も同じように用意できたら質問内容は完成です。<img src="https://images.microcms-assets.io/assets/b34fbdc7ac9e4a7fb17548479cef47ce/4d06f5e94c334dc086809de7f5b3c5b2/04.png" alt="">試しに右上の目のアイコンをクリックしてプレビューを開いて、実際に入力してみてください。Googleフォーム作成画面の方の中央あたりにある「回答」を開くと入力した内容が保存されているのが確認できると思います。これでフォームの作成は完了です。ここから少しだけGASを使ってGoogleフォームとスプレッドシートを連携していきます。<h2 id="hf7b15f316b">3. Googleフォームと英単語帳を連携</h2>一旦スプレッドシートの方に戻ります。そうすると見覚えのない「フォームの回答 1」というシートが追加されていると思います。これはGoogleフォームとスプレッドシートを連携すると勝手にできるもので、このまま単語帳として使ってもいいんですが少々使い勝手が悪いので、GASを使って最初に作った英単語帳シートに英単語を追加していきます。（このシートは消さないでください）ツールから、スクリプトエディタを開きます。そしてエディタに以下のコードをコピペしてください。<pre><code>function myFunction(e) {
 const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('英単語帳');
 const lastRow = sheet.getLastRow();
 const enWord = e.namedValues['英単語'];
 const jaWord = e.namedValues['日本語訳'];
 const enText = e.namedValues['例文（英語）'];
 const jaText = e.namedValues['例文（日本語訳）'];

 sheet.getRange(lastRow + 1, 1).setValue('=ROW()-1');
 sheet.getRange(lastRow + 1, 2).setValue(enWord);
 sheet.getRange(lastRow + 1, 3).setValue(jaWord);
 sheet.getRange(lastRow + 1, 4).setValue(enText);
 sheet.getRange(lastRow + 1, 5).setValue(jaText);
}</code></pre>それぞれ解説すると、<ul><li><code>myFunction()</code>&nbsp;の中に&nbsp;<code>e</code>&nbsp;を入れると、スプレッドシートに連携したGoogleフォームの内容が取得できます。</li><li><code>SpreadsheetApp.getActiveSpreadsheet()</code>&nbsp;で英単語帳のスプレッドシートを取得します。<code>getSheetByName</code>&nbsp;の<code>('英単語帳')</code>は先程設定したシート名を入力します。</li><li><code>sheet.getLastRow()</code>&nbsp;で英単語帳の最後の行を取得します。</li><li><code>e.namedValues</code>&nbsp;でフォームの質問文を入力して、それぞれの質問の回答を取得しています。そのためGoogleフォームで作成した質問文と一字一句間違わないように入力してください。</li><li><code>sheet.getRange</code>&nbsp;はフォームの入力情報をシートに一列ずつ入力しています。一番最初の&nbsp;<code>=ROW()-1</code>&nbsp;は単語の順番を入力するもので、わざわざこうしている理由は後から単語をシャッフルした時に番号が自動で番号順になってくれるからです。</li></ul>Googleフォームから回答を取得するコードは<a href="https://vba-gas.info/gas-googleform-1" target="_blank" rel="noopener noreferrer">こちら</a>のサイトを参考にしました。コピペできたらプロジェクトを保存して、左のメニューの時計マークのトリガーを開きます。右下の「トリガーを追加」を押して、一番下の「イベントの種類を選択」でフォーム送信時を選択します。それ以外はそのままで大丈夫です。<img src="https://images.microcms-assets.io/assets/b34fbdc7ac9e4a7fb17548479cef47ce/cfc7fc98f9a5497f8402bfba23c367a7/02.png" alt="">（Googleのサービスなのに）なぜかポップアップブロッカーにブロックされる場合は「常に許可する」を選んでもう一度トリガーを追加してください。「保存」を押してGoogleアカウントのログイン画面が出てきてアクセスのリクエストを要求される場合も許可してください。これでもう英単語帳のスクリプトは完成です！試しにもう一度フォームを送ってみてください。英単語帳に単語が記録されていれば完成です！<img src="https://images.microcms-assets.io/assets/b34fbdc7ac9e4a7fb17548479cef47ce/cf3ba3dd3ce3470faef32c36fd9cb6cc/09.png" alt="">↑適当に単語帳を開いて選んでみました。特に意味はありません。あとはGoogleフォームのリンクをスマホに保存しておけば、いつでもどこでも単語入力することができるようになりました！しかし、せっかく作った単語帳の見た目がなんか良くないですよね。なんか文字見切れてるし。そこでここからは見た目の整理と暗記方法について紹介します。※あくまで私個人の考えた暗記方法なので、自分なりの方法がある方はぜひそちらでやってください！<h2 id="hb7073190da">4. 貯めた英単語を覚える方法</h2>まずは見ていただいたほうが早いでしょう。私のプライベートな単語帳はこんな感じです。<img src="https://images.microcms-assets.io/assets/b34fbdc7ac9e4a7fb17548479cef47ce/47122c1161f84e3aa3e6d666a68da664/05.png" alt="">↑もうすでに私は400個以上登録していますｗ 例文の日本語訳を書いていないところは、英単語の訳だけ分かれば後もわかるだろうと思ったからです。<s>めんどくさいわけではない</s>追記：大学受験で使った結果、最終的に1000個以上単語を登録していました！（ダブってるものも含め）上の画像のように英単語を緑色、日本語訳を赤色に変更して、見切れない程度の長さに列を調整するのがおすすめです。こうすることで赤シートや緑シートを使った勉強をすることができます。ここからはこの単語帳を使った勉強法を3種類紹介します。<h3 id="hee34d37e70">紙に印刷して赤シートを使って覚える方法</h3>まとめて単語帳を作る場合は良い方法なんですが、今回のようなちょっとずつ単語を増やしていくような方法ではあまりおすすめはしません。単語数が増えたらその都度印刷しなければならないので紙代とインク代の心配以上に面倒が勝ってしまうからです。（もしやる場合はもう少し文字の色を薄めにしたほうがきれいに消えるかもです）<h3 id="h27d7aa5846">スプレッドシートの画面を赤シートで隠す方法</h3><img src="https://images.microcms-assets.io/assets/b34fbdc7ac9e4a7fb17548479cef47ce/59cf79ce1fb045fdb923335e65ba452b/06.png" alt="">赤文字がうっすら見えるくらい薄い色（カラーコードでいうと#ffdcdcくらい）にすれば画面越しに赤シートを使うことができます！（緑も同じく）超お手軽で、単語を追加したらすぐに反映されるので手間はほとんどありません。赤シートを持っていれば無料で使えます。デメリットとしてはいつでもどこでも赤シートを持っているわけではないので、持っていないと使いにくいという点があります。<h3 id="h03f4ee1728">赤シートアプリを使う方法</h3>個人的には一番おすすめの方法です。iPhoneでは<a href="https://apps.apple.com/jp/app/id1483320043" target="_blank" rel="noopener noreferrer">イルカの暗記シート</a>、Androidでは<a href="https://play.google.com/store/apps/details?id=jp.daisuke.kawamura.imemsheet&amp;hl=ja&amp;gl=US" target="_blank" rel="noopener noreferrer">i-暗記シート</a>というアプリを使います。（制限はありますが無料で使うこともできます）<img src="https://images.microcms-assets.io/assets/b34fbdc7ac9e4a7fb17548479cef47ce/ed657bd57a00406e96fd52662991bf60/01.png" alt="">↑イルカの暗記シートの画面です。画面上の赤シートで赤文字を隠して覚えることができます。アプリ側で赤シートと緑シートを切り替える設定があり、切り替えると緑色で書いた英単語が逆に見えなくなるため、日本語を見て英単語を思い出すという勉強が可能になります。（iPhone/Androidどちらでもできました）<img src="https://images.microcms-assets.io/assets/b34fbdc7ac9e4a7fb17548479cef47ce/6ba80c1f11ec44dcbb579732ec8dec87/08.png" alt="">↑こちらが緑シートです。暗記するときは例文が見えないように拡大して使うのが良いと思います。アプリで使う方法は、英単語帳をPDF化してアプリで読み込んで使います。PDFをダウンロードする前に、一番左上(A1)から「例文（英文）」の一番下までの範囲を選択します。例文の日本語訳も入れたい場合はそちらも選択してください。個人的には文字が小さくなってしまうので、日本語訳は省略してわからない時だけスプレッドシートを開いて使っています。次にファイル→ダウンロード→PDFを選択します。設定は用紙サイズはA4、ページの向きは縦向き、スケールは幅に合わせる、余白は標準がおすすめです。ダウンロードしたPDFをスマホに転送して、赤シートアプリを開いて読み込めば完了です！デメリットはAndroid版のアプリが割と頻繁に落ちる（私の端末だけかもしれない）時があることと、PDFをダウンロードする時にPCを立ち上げる必要があることです。完全にPCレスにはならないですが、それでも紙に印刷するよりは楽だと思います。（調べたらPDF化もGASで自動化できるらしいので興味のある方はやってみてください）<h2 id="ha214098e44">まとめ</h2>あくまで暗記方法は一例なので、自分なりの暗記方法を探してみてください。これを応用してAnkiやQuizletなどの暗記アプリ用に特化したものを作るのもいいと思います。この記事が試験勉強などに少しでも役に立てれば幸いです！最後まで読んでいただきありがとうございました。

Googleスプレッドシートで英単語帳を作る方法を紹介します。

Welcome to tanukizzan.com!

Blog

ブログリニューアルしました

エヴァンゲリオン風フォントジェネレーター作ってみた

スプレッドシートで作った英単語帳にGoogleフォームから単語を追加する方法（+暗記方法）