<p>「なんだかおしゃれ」「見やすい」「情報が整理されていて分かりやすい」<br>私たちが日常的に目にするデザインには、そんな印象を与えるものがあります。実は、これらのデザインの多くは、基本的な<strong>四つの原則</strong>に基づいて作られています。<br><br>もしあなたがこれからデザインを学び始めたいと思っているなら、この四原則を知っておくことは非常に重要です。なぜなら、これらの原則を理解することで、あなたのデザインは格段に向上するからです。<br>今回のブログでは、デザインの基礎となる「近接」「整列」「コントラスト」「反復」という四つの原則を、初心者の方にも分かりやすく解説していきます。<br></p><h2 id="h99e4457199">1. 関係性を視覚化する「近接」</h2><p><strong>近接（きんせつ）</strong>とは、関連性の高い要素同士を近くに配置するという原則です。<br>例えば、連絡先の情報（名前、電話番号、メールアドレス）は、それぞれが関連性の高い情報ですよね。これらをバラバラに配置するよりも、まとめて配置する方が、一つのまとまりとして認識されやすくなります。<br></p><h3 id="h6206b270e0"><strong>近接の効果</strong></h3><ul><li><strong>情報の整理</strong>: 関連情報がグループ化され、視覚的に整理されます。</li><li><strong>視覚的な階層</strong>: どの情報が重要で、どの情報が関連しているのかが直感的に理解できます。</li><li><strong>理解の促進</strong>: 情報のまとまりが認識しやすくなるため、内容が理解しやすくなります。</li></ul><p><br></p><h3 id="h94ce5bf18c"><strong>実践のヒント</strong></h3><ul><li>複数の要素を配置する際は、それぞれの関連性を考慮し、意味のあるグループを作りましょう。</li><li>グループ間には適切な余白を設け、各グループが独立して見えるように工夫しましょう。</li></ul><p><br></p><h2 id="hca7db2fd14">2. 秩序と調和を生む「整列」</h2><p><strong>整列（せいれつ）</strong>とは、要素を意図的に配置し、線や軸を意識して揃えるという原則です。<br>要素がきちんと整列しているデザインは、見る人に秩序感とプロフェッショナルな印象を与えます。逆に、要素がバラバラに配置されていると、落ち着かない印象を与えてしまいます。<br></p><h3 id="h4b29deab58"><strong>整列の効果</strong></h3><ul><li><strong>視覚的な秩序</strong>: 要素が整理され、すっきりとした印象を与えます。</li><li><strong>プロフェッショナルな印象</strong>: 細部まで丁寧に作り込まれた印象を与えます。</li><li><strong>視線の誘導</strong>: 要素が整列していることで、自然な視線の流れが生まれます。</li></ul><p><br></p><h3 id="h94ce5bf18c"><strong>実践のヒント</strong></h3><ul><li>テキストは左揃え、中央揃え、右揃えなど、目的に合った揃え方を選びましょう。</li><li>画像やイラストなどの要素も、テキストや他の要素との関係性を意識して整列させましょう。</li><li>見えないガイドラインを意識して、要素を配置するように心がけましょう。</li></ul><p><br></p><h2 id="hea5b8b6cb4">3. 注目を集め、区別する「コントラスト」</h2><p><strong>コントラスト</strong>とは、デザイン要素間に意図的に差異をつけることで、注目を集めたり、要素同士を区別したりする原則です。<br>色の濃淡、大きさの違い、フォントの種類、太さなど、さまざまな方法でコントラストを生み出すことができます。<br></p><h3 id="h103600d17d"><strong>コントラストの効果</strong></h3><ul><li><strong>重要な要素の強調</strong>: コントラストを強くすることで、特に伝えたい情報を際立たせることができます。</li><li><strong>視覚的な興味</strong>: 変化のあるデザインは、見る人の興味を引きつけます。</li><li><strong>情報の区別</strong>: 要素の種類や役割を明確に区別することができます。</li></ul><p><br></p><h3 id="h94ce5bf18c"><strong>実践のヒント</strong></h3><ul><li>背景色と文字色のコントラストを十分に確保し、文字が読みやすいようにしましょう。</li><li>見出しと本文のフォントにコントラストをつけ、視覚的な階層を作りましょう。</li><li>重要なキーワードや強調したい部分には、色やサイズでコントラストをつけましょう。</li></ul><p><br></p><h2 id="h51a84a2d87">4. 一貫性とリズムを生み出す「反復」</h2><p><strong>反復（はんぷく）</strong>とは、デザイン要素（色、形、フォント、スタイルなど）を繰り返し活用することであると説明します。 反復活用は、デザイン全体に一貫性をもたらし、統一感を高める効果があります。ブランドイメージの構築において反復は重要であり、例えば、ロゴの色を主要な要素に活用したり、特定のフォントを様々なセクションで活用したりすることが挙げられます。 ただし、過度な反復は単調な印象を与える可能性があるため、注意が必要です。<br></p><h2 id="ha214098e44">まとめ</h2><p>今回は、デザインの基本的な四原則「近接」「整列」「コントラスト」「反復」について解説しました。これらの原則は、どんな種類のデザインにも応用できる普遍的なものです。<br>デザインを学ぶ上で、これらの原則を常に意識し、実践していくことが、より魅力的で効果的なデザインを生み出すための第一歩となります。<br>今日から、あなたが目にする様々なデザインの中に、これらの四原則がどのように活用されているかを探してみてください。</p>

デザインを始める前に知っておきたい「四原則」

<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）とは