<h1 id="h0a1de854d8">Atomic Design</h1><p>Atomic Design はデザインシステムを作るための１つの手段。&nbsp;&nbsp;<br>UIコンポーネントの粒度をカテゴリーに明確に分ける手法。<br><br>コンポーネント分割で必要になってくるのが、このコンポーネントの役割は何なのかを意識しながら記述していくこと。<br></p><h2 id="h6fafe4d55e">Atomの作成</h2><p>Atomsには基本的なスタイルだけを指定し、色やpadding、widthなどは変更できるように作成する。&nbsp;&nbsp;<br>atomフォルダの中で、もしボタンを作成するなら更にbuttonフォルダを作成して、その中にPrimaryButton.jsxとSecondaryButton.jsx、そして、それらの大本、枠組みとなるBaseButton.jsxを作成する。</p><pre><code>import styled from "styled-components";
import { BaseButton } from "./BaseButton";

export const PrimaryButton = (props) =&gt; {
&nbsp;const { children } = props;
&nbsp;return &lt;SButton&gt;{children}&lt;/SButton&gt;;
};

const SButton = styled(BaseButton)`
&nbsp;background-color: #40514e;
`;</code></pre><p>BaseButtonを読み込む際には、今まで「styled.button」のように記述していた箇所を「styled(継承したいコンポーネント)」のように記述する。<br></p><h2 id="h6c99e295f5">Moleculesの作成</h2><p>moleculesフォルダの中で、ファイルを作成し、その中でatomで作成したパーツを組み合わせてmoleculesを作成する。&nbsp;&nbsp;<br>使っているAtomsの色やpadding、width、marginを指定する。&nbsp;&nbsp;<br><br>ただ、Moleculesは汎用的に使うことができるよう、Molecules自体のwidthやmarginなどは（基本的には）ここでは指定しないようにする。<br></p><h2 id="h721879544a">Organismの作成</h2><p>organismフォルダの中で、ファイルを作成し、その中でatomとmoleculesで作成したパーツを組み合わせてorganismを作成する。&nbsp;&nbsp;<br>使っているMoleculesのmarginやwidthはここで指定する。&nbsp;&nbsp;<br>また、Atomsを直接使う場合には色やpadding、width、marginを指定する。&nbsp;&nbsp;<br><br>ただ、Organismsは汎用的に使うことができるよう、Organisms自体のwidthやmarginなどは（基本的には）ここでは指定しない。<br></p><h2 id="h3c9925b841">Templateの作成</h2><p>Templateは、中身のないレイアウトのテンプレート。&nbsp;&nbsp;<br>コンテンツの横幅（width）や、サイドバーがあった場合のコンテンツの横幅などが含まれる。<br></p><h2 id="hd77b7d2006">Pageの作成</h2><p>これまでのコンポーネントに実際のテキストや画像を流しこみ用のもの。&nbsp;&nbsp;<br>このページ特有のOrganismsのmarginなどはここで指定する。&nbsp;&nbsp;<br>今までのような汎用的につくることは意識しない。<br></p><h1 id="h0cf17501c1">Atomic Designに取り組む時のポイント</h1><p><br></p><h2 id="h5ae2ef9ec6">あくまでベース</h2><p>Atomic Designはあくまで概念だと認識し、プロジェクトやチームに合わせてカスタマイズしていく。<br></p><h2 id="h82f7a3acab">初めから分けない</h2><p>慣れないうちにコンポーネントを分けようとすると難しい。まずは書いて定期的にリファクタリングする。<br></p><h2 id="hc7c4c9815d">要素の関心を意識する</h2><p>「何に関心があるコンポーネントなのか」を意識しながら分割したりpropsを定義したりする。<br></p>

Atomic Designとは

<p>	<img src="https://images.microcms-assets.io/assets/3f968ea90c0b4ef7a5e3053f7319914b/82ba8da275ef46c4bbf774f6361b6864/ticktickthumb.png" alt=""><br></p><h2 id="h871206e640">タスク管理の決定版！TickTickとは？</h2><p><a style="color:inherit" href="https://ticktick.com/" target="_blank" rel="noopener noreferrer">TickTick</a><br><br>TickTickとは、「ToDoアプリ」「カレンダーアプリ」「タイマーアプリ」「習慣化アプリ」等が1つに集約されている、タスク管理に必要な全ての機能を兼ね備えたオールインワンアプリです！<br><br>タスク管理と一言で言っても、タスク完了までは以下の3つのステップに分かれます。<br><br><strong>1.タスク登録</strong><br>自身の持っているタスクをアプリに登録する作業<br><br><strong>2.登録タスクのスケジューリング</strong><br>登録したタスクをいつ実行するかをカレンダーに組み込んだり、タスクに設定する作業<br><br><strong>3.タスクの実行</strong><br>タスクを期限までに終わらせられるよう実行する作業<br><br>今までのアプリはこの3ステップのどれかに特化しているものが多く、いつももう少し使い勝手が良くならないかなぁ…と思っていました。<br><br>そして、そんなモヤモヤを払拭してくれるアプリが今回紹介する「TickTick」でした！<br>Mizも2年以上愛用しているアプリで、本当に使いやすく日々の生産性に多大な貢献をしています！<br>そんなアプリをこれから紹介していきます！<br></p><h2 id="hbf044d6eb7">TickTickの使い方</h2><p>TickTickは主に、以下の4つも機能が使えます。</p><ul><li>ToDo管理</li><li>カレンダー表示</li><li>ポモドーロタイマー</li><li>習慣化管理</li></ul><p><br>それぞれ説明していきます。<br></p><h3 id="h6caa2fb590">ToDo管理</h3><p>タスク管理の最も基本的な機能です。<br><img src="https://images.microcms-assets.io/assets/3f968ea90c0b4ef7a5e3053f7319914b/afda9f8481b8453288432061c0610a54/ticktick01.png" alt=""><br><br>作成手順は以下の通りです。<br>STEP1<br><strong>右下の「+」ボタンをクリックする</strong><br><br>STEP2<br><strong>タスク内容を入力し、登録ボタンをクリックする</strong><br><br>STEP3<br><strong>タスクが登録されます</strong><br><br>以下の画像のようにタスク登録ではリマインダーも設定することも出来ます。<br><br><img src="https://images.microcms-assets.io/assets/3f968ea90c0b4ef7a5e3053f7319914b/082e4e2521e448a1b4c086e384d54597/ticktick02.png" alt=""><br>リマインダーの通知も好きな設定に変更出来るので、こちらも嬉しいポイントです。<br><br>また、毎週ある予定等はリピート設定も自由に設定出来るので、タスクの登録忘れ防止にもなります。<br><img src="https://images.microcms-assets.io/assets/3f968ea90c0b4ef7a5e3053f7319914b/df1a3dd9f95a4951843e3fca3bf7cde0/ticktick03.png" alt=""><br></p><h3 id="hcd3352c678">カレンダー表示</h3><p>カレンダー表示では、タスクの登録期限通りにカレンダー表示してくれます。<br><img src="https://images.microcms-assets.io/assets/3f968ea90c0b4ef7a5e3053f7319914b/b0a74883afcd44d797a9231ebde9066f/ticktick04.png" alt=""><br>右上の「…」から「カレンダーを購読」をするとGoogleカレンダー等と連携も出来るため、<br>カレンダーを見つつ、ToDo管理も一緒に出来て非常に便利です。<br></p><h3 id="h9904a23315">ポモドーロタイマー</h3><p>TickTickではポモドーロタイマーも使用することが出来ます。<br><br>そもそもポモドーロタイマーとは「25分作業」＋「5分休憩」をセットで繰り返す「ポモドーロ・テクニック」という時間管理術を実現する用のタイマーです。<br><br>タスクに紐付けて、ポモドーロタイマーを設定することも出来るので、タスクが何ポモドーロで完了したかも確認でき、時間配分に対しても効果を発揮出来ます。<br><img src="https://images.microcms-assets.io/assets/3f968ea90c0b4ef7a5e3053f7319914b/293e7d75270c464daaf3f1f05b36df48/ticktick05.png" alt=""><br>カウントダウン中に画面をタップすると上の画像右のように、時間だけの表示に出来ます。<br><br><img src="https://images.microcms-assets.io/assets/3f968ea90c0b4ef7a5e3053f7319914b/6451b980d7ab43ce857ef26ea2e91c8c/ticktick06.png" alt=""><br><br>カウントダウンが終わったら「リラックス」をタップして、5分の休憩に入りましょう。<br>休憩が終わったら再び開始をタップして作業に入ります。<br><br>このように「25分作業」＋「5分休憩」をセットで繰り返し集中して作業に取り組むことが出来ます。<br><br>ポモドーロ・テクニックに関しては以下の記事で詳しく解説しています。<br><br><a style="color:inherit" href="https://zenn.dev/miz_dev/articles/f0b926126c138f" target="_blank" rel="noopener noreferrer">ポモドーロ・テクニックとは？【集中して作業したい方必見！】</a><br></p><h3 id="haf9e8f5719">習慣化管理</h3><p>習慣化管理では、習慣化をしているものや習慣化させたいものを設定して、日々の習慣ログを取ることが出来ます。<br><img src="https://images.microcms-assets.io/assets/3f968ea90c0b4ef7a5e3053f7319914b/769ad573be2246e1b091db0475f6f85f/ticktick07.png" alt=""><br><img src="https://images.microcms-assets.io/assets/3f968ea90c0b4ef7a5e3053f7319914b/b09a9c1a605e4f61bc8341f4e674e582/ticktick08.png" alt=""><br><br>また、日々達成したかしてないかのアクティビティも確認出来るので、習慣化の進捗管理にピッタリです。<br>こういった習慣のログを見れるのは嬉しい機能です。<br><br><img src="https://images.microcms-assets.io/assets/3f968ea90c0b4ef7a5e3053f7319914b/486f343ca364481d819183558d288d5c/ticktick09.png" alt=""></p><h2 id="ha214098e44">まとめ</h2><p>「ToDoアプリ」「カレンダーアプリ」「タイマーアプリ」「習慣化アプリ」等が1つに集約されている、タスク管理に必要な全ての機能を兼ね備えたオールインワンアプリについて紹介しました！<br><br>機能の制限はありますが、無料版で一度TickTickを試すことも出来るので、是非試してみてください！</p>

タスク管理の決定版！「TickTick」の使い方を徹底解説【タスク管理はこれ1つでOK！】

<p><img src="https://images.microcms-assets.io/assets/3f968ea90c0b4ef7a5e3053f7319914b/52d727b00bf64222b1acf1e0d524c24c/about01.png" alt=""><br>「Web制作始めてみたいけどHTMLとCSSってそもそも何？」、「どうやって学んだら良いか分からない」という初心者の方に、HTMLとCSSの基礎とオススメ学習サイト3選についてわかりやすく解説します！<br></p><h2 id="hbf6305a849">本記事のテーマ</h2><p style="text-align:center"><strong>【完全初心者向け】HTMLとCSSの基礎知識とオススメ学習サイト3選</strong></p><p style="text-align:center"><br></p><h2 id="h0ea94d9793">HTML&amp;CSS</h2><h3 id="h36c1dc7783">HTMLとは</h3><p>HTML(エイチティーエムエル)とはHyper Text Markup Language(ハイパーテキストマークアップランゲージ)の頭文字をとったもので、「Webページを表示するときの土台となるコンピューター言語」です。<br>Webページに表示したい文章や画像を「&lt;」と「&gt;」で挟んだ「タグ」と呼ばれる文字列で囲み、目印を付けて書いていきます。<br>タグで文章を囲むことで、「ここは見出しですよ」、「ここは画像ですよ」というようにどういう意味があるのか、コンピュータに伝えることが出来ます。<br>このタグで囲んで目印をつけることをマークアップと呼ぶことから、HTMLはマークアップ言語と呼ばれます。<br></p><p style="text-align:center">HTMLとは<strong>「Webページを表示するときの土台となるコンピューター言語」</strong></p><h3 id="he304014047"><br>CSSとは</h3><p>CSSとはCascading Style Sheets(カスケーディングスタイルシート)の頭文字をとったもので、「Webページにデザインを施し、どのようにブラウザに表示するか指定する言語」です。<br>先程のHTMLが文章の構造を担当するのに対して、CSSは「Webページにデザインを施し、どのようにブラウザに表示するか指定する言語」のため、HTMLとセットで使われます。<br>CSSがあることにより、「見出しは青色にしよう」、「この画像同士を横に3つ並べて表示しよう」というように、Webサイトを自分の思うようなデザインにすることが出来ます。<br>このWebサイトを自分の思うようなデザインにすることが、CSSの面白いところであり、また、CSSの難しいところでもあります。<br></p><p style="text-align:center">CSSとは<strong>「Webページにデザインを施し、どのようにブラウザに表示するか指定する言語」</strong></p><h3 id="h0d0514322a"><br>HTML&amp;CSSまとめ</h3><ul><li>HTML：文章や構造を作る</li><li>CSS　：HTMLで作成したものをデザインする</li></ul><p><br>HTML&amp;CSSはそれぞれ、文章や構造を作るHTML、それをデザインするCSSと覚えましょう。<br></p><h2 id="h9f24409a06">オススメ学習サイト3選</h2><h3 id="h310d037b4e">progate</h3><p>まずは初心者学習サイトの王道、progate。<br>ここから入っていった人も多いのでは無いでしょうか。<br>自分も多分に漏れず、このprogateからスタートしました。<br>図解スライドが非常に分かりやすく、そのあと実際にブラウザ上でコードを書いて試せるところがGood！<br>環境構築も要らないので、その点も初心者の方にはオススメです！<br>スマートフォン用のアプリもあるので、どこでも学習が出来るのは嬉しいですね。<br><br><a style="color:inherit" href="https://prog-8.com/" target="_blank" rel="noopener noreferrer">Progate(プロゲート) | Learn to code, learn to be creative.</a><br></p><h3 id="h1179ac4505">ドットインストール</h3><p>動画での初心者学習サイトの王道、ドットインストール。<br>こちらは主に動画で観ながら学べるサイトです。<br>1回の動画が3分程で観終わるので、隙間時間の学習にももってこい！<br>progateのように、ブラウザ上での環境でコードを書ける訳では無いのですが、自分のPCで環境構築をするところから始められるので、その練習にもピッタリですね。<br>あわせて読みたい<br><br><a style="color:inherit" href="https://dotinstall.com/" target="_blank" rel="noopener noreferrer">ドットインストール</a><br></p><h3 id="h3749b5415d">paizaラーニング</h3><p>最後はpaizaラーニング。<br>こちらは動画で学べつつ、実際にコードもブラウザ上で書けるサービスです。<br>HTMLとCSSでは無いですが、ゲームをしながらプログラミングを学べるコンテンツがあったりと、楽しくプログラミングを学べるサービスだと思います！<br><br><a style="color:inherit" href="https://paiza.jp/works" target="_blank" rel="noopener noreferrer">環境構築不要！初心者でも楽しく学習できるプログラミング入門サービス【paizaラーニング】</a><br></p><h2 id="h3bcda3e6b0">最後に</h2><p>ここまで、HTMLとCSSの基礎についてとオススメ学習サイトを説明してきました。<br>HTMLとCSSは書いているものが画面上に反映されるので、自分がコードを書いたことへの実感が得やすいと思います。<br>ここの書いてすぐに反映されることが結構モチベーションにも繋がり、楽しい部分でもあるので、これを機に実際にコードを書いてWeb制作の1歩目を踏み出しましょう！</p>

HTML/CSSとは？基礎知識とオススメ学習サイト3選【完全初心者向け】

<p><img src="https://images.microcms-assets.io/assets/3f968ea90c0b4ef7a5e3053f7319914b/0e73e7d814fe44cda46843cc2b3a984f/about01.png" alt=""><br>はじめまして！<br>本日から当ブログ「MizLog(ミズログ)」をはじめるMIz(ミズ)です！<br>普段は都内のWeb制作会社でフロントエンジニアとして働いています。<br>何故、ブログを始めたのか、当ブログのコンセプトを伝えたいと思います。<br></p><h2 id="hc921ce511d">ブログを始めた理由</h2><p>自分のように未経験からWeb制作を始めたい方に、自分の経験を踏まえて発信し、1人でも多く未経験からWeb制作に進める人を増やしたいと思い、当ブログを始めることにしました。<br><br>また、以前WordPressでブログを開設していましたが、TypeScript/React/Next.js学習の一環としてNext.jsでブログを作成してみたいと思い、このブログを作成しました。<br><br></p><h2 id="h24e66c5cc9">当サイト（MizLog）のコンセプト</h2><p style="text-align:center"><span style="color:#1e3a8a">「</span><strong style="color:#1e3a8a">未経験からの成長の歩みをアウトプット</strong><span style="color:#1e3a8a">」</span></p><p><br>当サイトでは、未経験からWeb制作の過程でぶつかった壁や、それを乗り越えるための行動をアウトプットしていけたらと思っています。<br>Web制作会社に入社してから、Web制作を学んでいく中で、インプットした知識や実務でよく使う技術を日々の備忘録としてこちらに書き留めていこうと思います。<br>その他にも、Web制作関連の役立つツールやビジネスで使えるTips、そして、自分の趣味の分野も自由に更新していきます。<br></p><h2 id="h3bcda3e6b0">最後に</h2><p>最初なので、短めとなりますが今後ともよろしくお願いします！</p>

Atomic Designとは

タスク管理の決定版！「TickTick」の使い方を徹底解説【タスク管理はこれ1つでOK！】

HTML/CSSとは？基礎知識とオススメ学習サイト3選【完全初心者向け】

当サイト（MizLog）とは