<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>figma初心者</title>
	<atom:link href="https://furugrand.online/tag/figma%E5%88%9D%E5%BF%83%E8%80%85/feed/" rel="self" type="application/rss+xml" />
	<link>https://furugrand.online</link>
	<description>ヨイカゲは、良い加減・41の加減と掛けています。できるだけお金をかけずに、WordPress・figmaを勉強したいと思っています。</description>
	<lastBuildDate>Sat, 01 Feb 2025 12:49:35 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.8</generator>

<image>
	<url>https://furugrand.online/wp-content/uploads/2025/02/cropped-Frame-8-1-2-32x32.png</url>
	<title>figma初心者</title>
	<link>https://furugrand.online</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>【figma】初心者がデスクトップデザインを作成</title>
		<link>https://furugrand.online/figma1/</link>
		
		<dc:creator><![CDATA[ヨイカゲの主]]></dc:creator>
		<pubDate>Thu, 09 Jan 2025 05:49:32 +0000</pubDate>
				<category><![CDATA[figma]]></category>
		<category><![CDATA[figma初心者]]></category>
		<guid isPermaLink="false">https://furugrand.online/?p=44</guid>

					<description><![CDATA[figmaを無料プランで、簡単なデスクトップデザインを制作してみます。※figmaアプリを使用しています。 私はコーディングの勉強を1年間してきましたが、figmaからの書き出しがすごく楽。figmaでデザインができるよ [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>figmaを無料プランで、簡単なデスクトップデザインを制作してみます。※figmaアプリを使用しています。</p>



<p>私はコーディングの勉強を1年間してきましたが、figmaからの書き出しがすごく楽。figmaでデザインができるようになることを目指しています。</p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p>figmaとは？をまとめています↓</p>



<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-together">

<a target="_self" href="https://furugrand.online/figma0/" title="figmaとは「初心者がfigmaをはじめる準備をする」" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img decoding="async" width="160" height="90" src="https://furugrand.online/wp-content/uploads/2025/01/figma0-160x90.webp" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" srcset="https://furugrand.online/wp-content/uploads/2025/01/figma0-160x90.webp 160w, https://furugrand.online/wp-content/uploads/2025/01/figma0-300x169.webp 300w, https://furugrand.online/wp-content/uploads/2025/01/figma0-1024x576.webp 1024w, https://furugrand.online/wp-content/uploads/2025/01/figma0-768x432.webp 768w, https://furugrand.online/wp-content/uploads/2025/01/figma0-1536x864.webp 1536w, https://furugrand.online/wp-content/uploads/2025/01/figma0-120x68.webp 120w, https://furugrand.online/wp-content/uploads/2025/01/figma0-320x180.webp 320w, https://furugrand.online/wp-content/uploads/2025/01/figma0.webp 1920w" sizes="(max-width: 160px) 100vw, 160px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">figmaとは「初心者がfigmaをはじめる準備をする」</div><div class="blogcard-snippet internal-blogcard-snippet">figmaとはWebサイト・スマートフォンのアプリのデザインに使用されるツールです。有名なものであれば、Photoshopなどがありますが「有料」です。figmaは「無料」で充分に使用できるのが特徴です。私は音楽など月額で加入しているもの（...</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img decoding="async" src="https://www.google.com/s2/favicons?domain=https://furugrand.online" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">furugrand.online</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2025.01.28</div></div></div></div></a>
</div>



<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>




  <div id="toc" class="toc tnt-none toc-center tnt-none border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-2" checked><label class="toc-title" for="toc-checkbox-2">目次</label>
    <div class="toc-content">
    <ul class="toc-list open"><li><a href="#toc1" tabindex="0">デスクトップデザインを作成</a><ul><li><a href="#toc2" tabindex="0">フレームを作成</a></li><li><a href="#toc3" tabindex="0">ヘッダーを作成</a></li><li><a href="#toc4" tabindex="0">ヘッダーのナビゲーションを作成</a></li><li><a href="#toc5" tabindex="0">メイン画像</a></li><li><a href="#toc6" tabindex="0">フッター</a></li></ul></li><li><a href="#toc7" tabindex="0">レスポンシブデザイン作成</a><ul><li><a href="#toc8" tabindex="0">レスポンシブのフレーム</a></li><li><a href="#toc9" tabindex="0">ハンバーガーアイコン</a></li></ul></li></ul>
    </div>
  </div>

<h2 class="wp-block-heading fukidasi"><span id="toc1">デスクトップデザインを作成</span></h2>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p>今回は簡単なデスクトップデザイン、レスポンシブデザインを作成していきます。</p>



<div class="wp-block-group is-style-default has-watery-red-background-color has-background is-layout-constrained wp-container-core-group-is-layout-c762de71 wp-block-group-is-layout-constrained" style="padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--20)">
<p class="has-text-align-center"><strong>完成イメージ</strong></p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-ec2e7a44 wp-block-columns-is-layout-flex" style="padding-top:0;padding-bottom:0">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full" style="margin-left:var(--wp--preset--spacing--50)"><img fetchpriority="high" decoding="async" width="810" height="636" src="https://furugrand.online/wp-content/uploads/2025/01/flame12.webp" alt="" class="wp-image-158" srcset="https://furugrand.online/wp-content/uploads/2025/01/flame12.webp 810w, https://furugrand.online/wp-content/uploads/2025/01/flame12-300x236.webp 300w, https://furugrand.online/wp-content/uploads/2025/01/flame12-768x603.webp 768w" sizes="(max-width: 810px) 100vw, 810px" /><figcaption class="wp-element-caption">　　　　　　　　　　　<strong>デスクトップデザイン</strong></figcaption></figure>



<p class="has-text-align-center"></p>
</div>



<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full is-resized" style="margin-left:var(--wp--preset--spacing--70)"><img loading="lazy" decoding="async" width="265" height="443" src="https://furugrand.online/wp-content/uploads/2025/01/flame16.webp" alt="" class="wp-image-172" style="width:264px;height:auto" srcset="https://furugrand.online/wp-content/uploads/2025/01/flame16.webp 265w, https://furugrand.online/wp-content/uploads/2025/01/flame16-179x300.webp 179w" sizes="(max-width: 265px) 100vw, 265px" /><figcaption class="wp-element-caption">　　　　　<strong>レスポンシブデザイン</strong></figcaption></figure>



<p class="has-text-align-center"></p>
</div>
</div>
</div>



<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading"><span id="toc2">フレームを作成</span></h3>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-0d2466c3 wp-block-columns-is-layout-flex" style="border-width:2px;border-radius:20px;padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="475" height="175" src="https://furugrand.online/wp-content/uploads/2025/01/flame2.webp" alt="" class="wp-image-87" srcset="https://furugrand.online/wp-content/uploads/2025/01/flame2.webp 475w, https://furugrand.online/wp-content/uploads/2025/01/flame2-300x111.webp 300w" sizes="(max-width: 475px) 100vw, 475px" /></figure>
</div>



<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<p>画面下にある、「＃」（フレーム）をクリックします。</p>
</div>
</div>



<div style="height:10px" aria-hidden="true" class="wp-block-spacer"></div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-0d2466c3 wp-block-columns-is-layout-flex" style="border-width:2px;border-radius:20px;padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="411" height="340" src="https://furugrand.online/wp-content/uploads/2025/01/flame4.webp" alt="" class="wp-image-92" srcset="https://furugrand.online/wp-content/uploads/2025/01/flame4.webp 411w, https://furugrand.online/wp-content/uploads/2025/01/flame4-300x248.webp 300w" sizes="(max-width: 411px) 100vw, 411px" /></figure>
</div>



<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<p>右側に「フレーム」の内容が出てくるので、「デスクトップ」を選択します。</p>
</div>
</div>



<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading"><span id="toc3">ヘッダーを作成</span></h3>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-0d2466c3 wp-block-columns-is-layout-flex" style="border-width:2px;border-radius:20px;padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="461" height="230" src="https://furugrand.online/wp-content/uploads/2025/01/flame5.webp" alt="" class="wp-image-143" srcset="https://furugrand.online/wp-content/uploads/2025/01/flame5.webp 461w, https://furugrand.online/wp-content/uploads/2025/01/flame5-300x150.webp 300w" sizes="(max-width: 461px) 100vw, 461px" /></figure>
</div>



<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<p>画面下にある、□（長方形フレーム）をクリックします。</p>
</div>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-0d2466c3 wp-block-columns-is-layout-flex" style="border-width:2px;border-radius:20px;padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="904" height="355" src="https://furugrand.online/wp-content/uploads/2025/01/flame7.webp" alt="" class="wp-image-145" srcset="https://furugrand.online/wp-content/uploads/2025/01/flame7.webp 904w, https://furugrand.online/wp-content/uploads/2025/01/flame7-300x118.webp 300w, https://furugrand.online/wp-content/uploads/2025/01/flame7-768x302.webp 768w" sizes="(max-width: 904px) 100vw, 904px" /></figure>
</div>



<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<p>ヘッダーにしたい場所に配置します。</p>
</div>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-0d2466c3 wp-block-columns-is-layout-flex" style="border-width:2px;border-radius:20px;padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="461" height="269" src="https://furugrand.online/wp-content/uploads/2025/01/flame6.webp" alt="" class="wp-image-146" srcset="https://furugrand.online/wp-content/uploads/2025/01/flame6.webp 461w, https://furugrand.online/wp-content/uploads/2025/01/flame6-300x175.webp 300w" sizes="(max-width: 461px) 100vw, 461px" /></figure>
</div>



<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<p>ヘッダーの背景色を変更できます。ここでは#FFDAC7の薄いオレンジ色にしてみます。</p>
</div>
</div>



<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading"><span id="toc4">ヘッダーのナビゲーションを作成</span></h3>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-0d2466c3 wp-block-columns-is-layout-flex" style="border-width:2px;border-radius:20px;padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="453" height="230" src="https://furugrand.online/wp-content/uploads/2025/01/flame8.webp" alt="" class="wp-image-148" srcset="https://furugrand.online/wp-content/uploads/2025/01/flame8.webp 453w, https://furugrand.online/wp-content/uploads/2025/01/flame8-300x152.webp 300w" sizes="(max-width: 453px) 100vw, 453px" /></figure>
</div>



<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<p>「T」（テキストツール）をクリックし、「トップ」「会社概要」「お知らせ」「お問合せ」の文言を入力して配置します。</p>
</div>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-0d2466c3 wp-block-columns-is-layout-flex" style="border-width:2px;border-radius:20px;padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="453" height="230" src="https://furugrand.online/wp-content/uploads/2025/01/flame9.webp" alt="" class="wp-image-151" srcset="https://furugrand.online/wp-content/uploads/2025/01/flame9.webp 453w, https://furugrand.online/wp-content/uploads/2025/01/flame9-300x152.webp 300w" sizes="(max-width: 453px) 100vw, 453px" /></figure>
</div>



<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<p>右側の「タイポグラフィー」から、文字の大きさ・太さを変更できます。</p>



<p>太字にする場合はBoldを選択します。</p>
</div>
</div>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="810" height="135" src="https://furugrand.online/wp-content/uploads/2025/01/flame10.webp" alt="" class="wp-image-152" srcset="https://furugrand.online/wp-content/uploads/2025/01/flame10.webp 810w, https://furugrand.online/wp-content/uploads/2025/01/flame10-300x50.webp 300w, https://furugrand.online/wp-content/uploads/2025/01/flame10-768x128.webp 768w" sizes="(max-width: 810px) 100vw, 810px" /></figure>



<p>ここまで完成しました！</p>



<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading"><span id="toc5">メイン画像</span></h3>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-0d2466c3 wp-block-columns-is-layout-flex" style="border-width:2px;border-radius:20px;padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="812" height="577" src="https://furugrand.online/wp-content/uploads/2025/01/flame11.webp" alt="" class="wp-image-157" srcset="https://furugrand.online/wp-content/uploads/2025/01/flame11.webp 812w, https://furugrand.online/wp-content/uploads/2025/01/flame11-300x213.webp 300w, https://furugrand.online/wp-content/uploads/2025/01/flame11-768x546.webp 768w" sizes="(max-width: 812px) 100vw, 812px" /></figure>
</div>



<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<p>PCの中にある画像から、「ドラック＆ドロップ」で移動させてきます。</p>
</div>
</div>



<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading"><span id="toc6">フッター</span></h3>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-0d2466c3 wp-block-columns-is-layout-flex" style="border-width:2px;border-radius:20px;padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img fetchpriority="high" decoding="async" width="810" height="636" src="https://furugrand.online/wp-content/uploads/2025/01/flame12.webp" alt="" class="wp-image-158" srcset="https://furugrand.online/wp-content/uploads/2025/01/flame12.webp 810w, https://furugrand.online/wp-content/uploads/2025/01/flame12-300x236.webp 300w, https://furugrand.online/wp-content/uploads/2025/01/flame12-768x603.webp 768w" sizes="(max-width: 810px) 100vw, 810px" /></figure>
</div>



<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<p>フッターは、ヘッダーを「コピー＆ペースト」をして、「テキストツール」を使用して著作権表示を記載しました。</p>
</div>
</div>



<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading fukidasi"><span id="toc7">レスポンシブデザイン作成</span></h2>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p>スマホ表示の画面を別途作成していきます。</p>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading"><span id="toc8">レスポンシブのフレーム</span></h3>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-0d2466c3 wp-block-columns-is-layout-flex" style="border-width:2px;border-radius:20px;padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="434" height="526" src="https://furugrand.online/wp-content/uploads/2025/01/flame13.webp" alt="" class="wp-image-160" srcset="https://furugrand.online/wp-content/uploads/2025/01/flame13.webp 434w, https://furugrand.online/wp-content/uploads/2025/01/flame13-248x300.webp 248w" sizes="(max-width: 434px) 100vw, 434px" /></figure>
</div>



<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<p>「フレームツール」をクリックし、スマホのiPhone SEを選択します。</p>
</div>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-0d2466c3 wp-block-columns-is-layout-flex" style="border-width:2px;border-radius:20px;padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="296" height="504" src="https://furugrand.online/wp-content/uploads/2025/01/flame14.webp" alt="" class="wp-image-162" srcset="https://furugrand.online/wp-content/uploads/2025/01/flame14.webp 296w, https://furugrand.online/wp-content/uploads/2025/01/flame14-176x300.webp 176w" sizes="(max-width: 296px) 100vw, 296px" /></figure>
</div>



<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<p>今までの技を使い、ここまで完成させます。</p>
</div>
</div>



<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading"><span id="toc9">ハンバーガーアイコン</span></h3>



<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>



<p>スマホ用のハンバーガーアイコンを作成します。</p>



<div class="wp-block-cocoon-blocks-timeline timeline-box cf block-box has-point-color has-key-color-point-color not-nested-style cocoon-block-timeline" style="--cocoon-custom-point-color:#19448e"><div class="timeline-title"></div><ul class="timeline">
<li class="wp-block-cocoon-blocks-timeline-item timeline-item cf"><div class="timeline-item-label">step1</div><div class="timeline-item-content cf"><div class="timeline-item-title">ペンツールを使用して、1本の横線を引きます。</div><div class="timeline-item-snippet">
<figure class="wp-block-image size-full is-resized"><img loading="lazy" decoding="async" width="453" height="227" src="https://furugrand.online/wp-content/uploads/2025/01/flame15.webp" alt="" class="wp-image-165" style="width:503px;height:auto" srcset="https://furugrand.online/wp-content/uploads/2025/01/flame15.webp 453w, https://furugrand.online/wp-content/uploads/2025/01/flame15-300x150.webp 300w" sizes="(max-width: 453px) 100vw, 453px" /></figure>
</div></div></li>



<li class="wp-block-cocoon-blocks-timeline-item timeline-item cf"><div class="timeline-item-label">step2</div><div class="timeline-item-content cf"><div class="timeline-item-title">線を引いた後、×ボタンで「ペンツール」を終了させることができます。</div><div class="timeline-item-snippet">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="460" height="186" src="https://furugrand.online/wp-content/uploads/2025/01/flame17.webp" alt="" class="wp-image-167" srcset="https://furugrand.online/wp-content/uploads/2025/01/flame17.webp 460w, https://furugrand.online/wp-content/uploads/2025/01/flame17-300x121.webp 300w" sizes="(max-width: 460px) 100vw, 460px" /></figure>
</div></div></li>



<li class="wp-block-cocoon-blocks-timeline-item timeline-item cf"><div class="timeline-item-label">step3</div><div class="timeline-item-content cf"><div class="timeline-item-title">線をコピー＆ペーストで3本生成すると、左側に「Vector」が3つ出現します。</div><div class="timeline-item-snippet">
<p></p>
</div></div></li>



<li class="wp-block-cocoon-blocks-timeline-item timeline-item cf"><div class="timeline-item-label">step4</div><div class="timeline-item-content cf"><div class="timeline-item-title">線が3本重なっている状態なので、ハンバーガーアイコンのように均等に配置します。</div><div class="timeline-item-snippet">
<p></p>
</div></div></li>



<li class="wp-block-cocoon-blocks-timeline-item timeline-item cf"><div class="timeline-item-label">step5</div><div class="timeline-item-content cf"><div class="timeline-item-title">右クリックで「選択範囲のグループ化」を選択します。</div><div class="timeline-item-snippet">
<figure class="wp-block-image size-full is-resized"><img loading="lazy" decoding="async" width="407" height="281" src="https://furugrand.online/wp-content/uploads/2025/01/flame18.webp" alt="" class="wp-image-168" style="width:502px;height:auto" srcset="https://furugrand.online/wp-content/uploads/2025/01/flame18.webp 407w, https://furugrand.online/wp-content/uploads/2025/01/flame18-300x207.webp 300w" sizes="(max-width: 407px) 100vw, 407px" /></figure>



<div class="wp-block-cocoon-blocks-iconlist-box iconlist-box blank-box list-heart-o block-box has-background has-border-color has-icon-color has-ex-a-background-color has-pink-border-color has-pink-icon-color"><div class="iconlist-title"></div>
<ol class="wp-block-list is-style-icon-list-thumb-up has-list-style">
<li>グループ化することで、楽々移動が可能！</li>
</ol>
</div>
</div></div></li>



<li class="wp-block-cocoon-blocks-timeline-item timeline-item cf"><div class="timeline-item-label">step6</div><div class="timeline-item-content cf"><div class="timeline-item-title">右側の「線」の太さを調整して、任意の位置にハンバーガーアイコンを移動させます。</div><div class="timeline-item-snippet">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="376" height="181" src="https://furugrand.online/wp-content/uploads/2025/01/flame19.webp" alt="" class="wp-image-171" srcset="https://furugrand.online/wp-content/uploads/2025/01/flame19.webp 376w, https://furugrand.online/wp-content/uploads/2025/01/flame19-300x144.webp 300w" sizes="(max-width: 376px) 100vw, 376px" /></figure>
</div></div></li>



<li class="wp-block-cocoon-blocks-timeline-item timeline-item cf"><div class="timeline-item-label">finish</div><div class="timeline-item-content cf"><div class="timeline-item-title">シンプルなレスポンシブデザインが完成しました。</div><div class="timeline-item-snippet">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="265" height="443" src="https://furugrand.online/wp-content/uploads/2025/01/flame16.webp" alt="" class="wp-image-172" srcset="https://furugrand.online/wp-content/uploads/2025/01/flame16.webp 265w, https://furugrand.online/wp-content/uploads/2025/01/flame16-179x300.webp 179w" sizes="(max-width: 265px) 100vw, 265px" /></figure>
</div></div></li>
</ul></div>



<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>



<p></p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
