お問い合わせ

ハジメラボ HAJIME LABO

2024/09/12 (木)

サイト制作の流れをデザイナー目線で解説!!

今回は、ハジメクリエイトでのWEB制作手順をデザイナー目線で紹介します!

 

「WEBデザインってどうやって作られてるの?」
「WEB制作の流れってどんな感じ?」

 

これからWEB制作を依頼したいと考えている方や、一緒に働きたい方に参考になればと思い、作業の流れをお伝えします!

 

 

○ 制作の5つのSTEP


STEP1: 企画&設計
担当:ディレクター
企業様と打ち合わせを行い、何度かやりとりを重ねながら、サイトの内容やデザイン、運用の方向性を決めます。

 

STEP2: 構成作成
担当:ディレクター
決定した内容を元に、ワイヤーフレーム(構成案)を作成します。

 

STEP3: デザイン作成
担当:デザイナー
ワイヤーフレームに基づいてデザインを作成します。詳細は後述します!

 

STEP4: コーディング
担当:コーダー
デザインデータを元に、コーディング作業を行います。

 

STEP5: 確認&サイト公開
完成したサイトをデザイナーとディレクターで確認し、クライアントに承認をいただければ公開となります。

 

 

以上がざっくりと制作の流れです。

 

 

 

 

デザイン作成の詳細 — STEP3について解説! —


ここからは、デザイナーの仕事であるデザイン作成について、もう少し詳しく説明します。

デザイン作成の3つのポイントを実際に公開しているサイト、オートリンク様 コーティングページ を例に解説していきます。

 

①制作ツール

ハジメクリエイトでは主にAdobe XDを使ってデザインを作成しています。

最近はFigmaの導入も検討していますが、現時点ではXDがメインです。

とはいえ、IllustratorPhotoshopも必要に応じて活用します。

 

・Illustrator: アイコン作成など、細かいパーツのデザインで使用

・Photoshop: 画像の加工や色調整を行う際に使用

 

    アイコンの作成や画像の組み合わせ、加工が必要な場合は、この2つを使用します。

    例えば、このアイコンはillustratorで作成しています。

     

     

     

    ②レスポンシブデザインの作成

    PCとスマホ、それぞれのデザインに加えて、レスポンシブデザインを作成します。

    PC版とスマホ版が切り替わるポイントは、社内では1024pxで設定しています(絶対ではないです)。

     

    ・PCデザイン: 1920px

    ・レスポンシブデザイン1: 〜1024px

    ・レスポンシブデザイン2: 1023px〜

    ・スマホデザイン: 360px

    ※XDの制作画面

    これら4種類のデザインを1ページごとに作成しますが、レスポンシブデザインを作成しない場合もあります。

     

     

    ③アニメーション指示

    構成の中にアニメーションが組み込まれていることもありますが、細かなアニメーションの提案は、基本的にデザイナーが行います。

    よく取り入れるのは、ホバーアニメーション(ボタンにマウスが乗ったときにデザインが変わる動作)です。

     

     

    今回の例では、スクロール表示にアニメーションを追加しています。全体的にシンプルなデザインで、ページが長いため、視覚的な変化をつけて最後まで見てもらえるよう工夫しました。

    アニメーションは多用しすぎるとユーザーにストレスを与えるため、インタラクションデザインを考慮して、選んでいます。

     


     

     

    以上が、WEBデザイン制作における3つのポイントです!

     

    今回は、ハジメクリエイトでのWeb制作の流れをデザイナーの視点から紹介しました。

    簡単な解説ではありますが、制作の流れやデザインがどのように作られているのか、少しでもお伝えできたなら嬉しいです。

     

    デザイン以外のプロセスについては簡潔にまとめていますが、各職種がそれぞれの役割で全力を尽くしています!

    Web制作は、デザイナー・コーダー・ディレクターがチームとなり、お客様の要望に応えていきます。

     

    これからも、最新のツールやトレンドを取り入れながら、良いデザインを提供できるよう、日々試行錯誤を続けていきます!

    ご覧いただき、ありがとうございました!

    人気記事ランキング

    Premiere Proからレガシータイトルが廃止されるってよ

    1

    アバター

    さかた

    2021/05/19 (水)

    Premiere Proからレガシータイトルが廃止されるってよ

    【写真付き】北長瀬ブランチのコストレマートでコストコ商品を探索!

    2

    アバター

    Morimoto

    2021/07/05 (月)

    【写真付き】北長瀬ブランチのコストレマートでコストコ商品を探索!

    WSL環境に自動生成される:Zone.Identifierファイルの削除方法

    3

    アバター

    Morimoto

    2023/12/22 (金)

    WSL環境に自動生成される:Zone.Identifierファイルの削除方法

    おいしいお弁当のお話し

    4

    アバター

    キューロ小坂

    2018/06/25 (月)

    おいしいお弁当のお話し

    ブラウザの違いが原因で発生したreCAPTCHA v3エラーについての備忘録

    5

    アバター

    Morimoto

    2024/02/15 (木)

    ブラウザの違いが原因で発生したreCAPTCHA v3エラーについての備忘録

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>【岡山】集客設計に自信あり。ホームページ制作・ECサイト運営はハジメクリエイト | 人と人、人とコンピュータをつなぐ。</title>
    <!-- <link rel="shortcut icon" href="--><!--/favicon.ico">-->
    <!-- <link rel="apple-touch-icon" href="/favicon.ico">-->
    <meta name='robots' content='noindex, nofollow' />
    <!-- All in One SEO Pack 2.12 by Michael Torbert of Semper Fi Web Design[228,274] -->
    <link rel="canonical" href="https://hajimecreate.com/" />
    <!-- /all in one seo pack -->
    <link rel='dns-prefetch' href='//s0.wp.com' />
    <link rel='dns-prefetch' href='//cdn.jsdelivr.net' />
    <link rel='dns-prefetch' href='//s.w.org' />
    <link rel="alternate" type="application/rss+xml" title="【岡山】集客設計に自信あり。ホームページ制作・ECサイト運営はハジメクリエイト &raquo; おかやま子育て応援宣言企業「アドバンス企業」に認定されました のコメントのフィード" href="https://hajimecreate.com/%e3%81%8a%e3%81%8b%e3%82%84%e3%81%be%e5%ad%90%e8%82%b2%e3%81%a6%e5%bf%9c%e6%8f%b4%e5%ae%a3%e8%a8%80%e4%bc%81%e6%a5%ad%e3%80%8c%e3%82%a2%e3%83%89%e3%83%90%e3%83%b3%e3%82%b9%e4%bc%81%e6%a5%ad%e3%80%8d/feed/" />
    <script type="text/javascript">
    window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/13.1.0\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/13.1.0\/svg\/","svgExt":".svg","source":{"concatemoji":"https:\/\/hajimecreate.com\/wp-includes\/js\/wp-emoji-release.min.js?ver=5.8.1"}};
    !function(e,a,t){var n,r,o,i=a.createElement("canvas"),p=i.getContext&&i.getContext("2d");function s(e,t){var a=String.fromCharCode;p.clearRect(0,0,i.width,i.height),p.fillText(a.apply(this,e),0,0);e=i.toDataURL();return p.clearRect(0,0,i.width,i.height),p.fillText(a.apply(this,t),0,0),e===i.toDataURL()}function c(e){var t=a.createElement("script");t.src=e,t.defer=t.type="text/javascript",a.getElementsByTagName("head")[0].appendChild(t)}for(o=Array("flag","emoji"),t.supports={everything:!0,everythingExceptFlag:!0},r=0;r<o.length;r++)t.supports[o[r]]=function(e){if(!p||!p.fillText)return!1;switch(p.textBaseline="top",p.font="600 32px Arial",e){case"flag":return s([127987,65039,8205,9895,65039],[127987,65039,8203,9895,65039])?!1:!s([55356,56826,55356,56819],[55356,56826,8203,55356,56819])&&!s([55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447],[55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447]);case"emoji":return!s([10084,65039,8205,55357,56613],[10084,65039,8203,55357,56613])}return!1}(o[r]),t.supports.everything=t.supports.everything&&t.supports[o[r]],"flag"!==o[r]&&(t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&t.supports[o[r]]);t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&!t.supports.flag,t.DOMReady=!1,t.readyCallback=function(){t.DOMReady=!0},t.supports.everything||(n=function(){t.readyCallback()},a.addEventListener?(a.addEventListener("DOMContentLoaded",n,!1),e.addEventListener("load",n,!1)):(e.attachEvent("onload",n),a.attachEvent("onreadystatechange",function(){"complete"===a.readyState&&t.readyCallback()})),(n=t.source||{}).concatemoji?c(n.concatemoji):n.wpemoji&&n.twemoji&&(c(n.twemoji),c(n.wpemoji)))}(window,document,window._wpemojiSettings);
    </script>
    <style type="text/css">
    img.wp-smiley,
    img.emoji {
    display: inline !important;
    border: none !important;
    box-shadow: none !important;
    height: 1em !important;
    width: 1em !important;
    margin: 0 .07em !important;
    vertical-align: -0.1em !important;
    background: none !important;
    padding: 0 !important;
    }
    </style>
    <link rel='stylesheet' id='wp-block-library-css' href='https://hajimecreate.com/wp-includes/css/dist/block-library/style.min.css?ver=5.8.1' type='text/css' media='all' />
    <link rel='stylesheet' id='responsive-lightbox-swipebox-css' href='https://hajimecreate.com/wp-content/plugins/responsive-lightbox/assets/swipebox/swipebox.min.css?ver=2.3.2' type='text/css' media='all' />
    <link rel='stylesheet' id='sb-type-std-css' href='https://hajimecreate.com/wp-content/plugins/speech-bubble/css/sb-type-std.css?ver=5.8.1' type='text/css' media='all' />
    <link rel='stylesheet' id='sb-type-fb-css' href='https://hajimecreate.com/wp-content/plugins/speech-bubble/css/sb-type-fb.css?ver=5.8.1' type='text/css' media='all' />
    <link rel='stylesheet' id='sb-type-fb-flat-css' href='https://hajimecreate.com/wp-content/plugins/speech-bubble/css/sb-type-fb-flat.css?ver=5.8.1' type='text/css' media='all' />
    <link rel='stylesheet' id='sb-type-ln-css' href='https://hajimecreate.com/wp-content/plugins/speech-bubble/css/sb-type-ln.css?ver=5.8.1' type='text/css' media='all' />
    <link rel='stylesheet' id='sb-type-ln-flat-css' href='https://hajimecreate.com/wp-content/plugins/speech-bubble/css/sb-type-ln-flat.css?ver=5.8.1' type='text/css' media='all' />
    <link rel='stylesheet' id='sb-type-pink-css' href='https://hajimecreate.com/wp-content/plugins/speech-bubble/css/sb-type-pink.css?ver=5.8.1' type='text/css' media='all' />
    <link rel='stylesheet' id='sb-type-rtail-css' href='https://hajimecreate.com/wp-content/plugins/speech-bubble/css/sb-type-rtail.css?ver=5.8.1' type='text/css' media='all' />
    <link rel='stylesheet' id='sb-type-drop-css' href='https://hajimecreate.com/wp-content/plugins/speech-bubble/css/sb-type-drop.css?ver=5.8.1' type='text/css' media='all' />
    <link rel='stylesheet' id='sb-type-think-css' href='https://hajimecreate.com/wp-content/plugins/speech-bubble/css/sb-type-think.css?ver=5.8.1' type='text/css' media='all' />
    <link rel='stylesheet' id='sb-no-br-css' href='https://hajimecreate.com/wp-content/plugins/speech-bubble/css/sb-no-br.css?ver=5.8.1' type='text/css' media='all' />
    <link rel='stylesheet' id='ppress-frontend-css' href='https://hajimecreate.com/wp-content/plugins/wp-user-avatar/assets/css/frontend.min.css?ver=3.1.19' type='text/css' media='all' />
    <link rel='stylesheet' id='ppress-flatpickr-css' href='https://hajimecreate.com/wp-content/plugins/wp-user-avatar/assets/flatpickr/flatpickr.min.css?ver=3.1.19' type='text/css' media='all' />
    <link rel='stylesheet' id='ppress-select2-css' href='https://hajimecreate.com/wp-content/plugins/wp-user-avatar/assets/select2/select2.min.css?ver=5.8.1' type='text/css' media='all' />
    <link rel='stylesheet' id='slickcss-css' href='https://hajimecreate.com/wp-content/themes/wp-hajime2021/js/slick/slick.css' type='text/css' media='all' />
    <link rel='stylesheet' id='slicktheme-css' href='https://hajimecreate.com/wp-content/themes/wp-hajime2021/js/slick/slick-theme.css' type='text/css' media='all' />
    <link rel='stylesheet' id='valEngine-css' href='https://hajimecreate.com/wp-content/themes/wp-hajime2021/js/validationEngine/validationEngine.jquery.css' type='text/css' media='all' />
    <link rel='stylesheet' id='jetpack_css-css' href='https://hajimecreate.com/wp-content/plugins/jetpack/css/jetpack.css?ver=7.2.3' type='text/css' media='all' />
    <script type='text/javascript' src='https://hajimecreate.com/wp-includes/js/jquery/jquery.min.js?ver=3.6.0' id='jquery-core-js'></script>
    <script type='text/javascript' src='https://hajimecreate.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.3.2' id='jquery-migrate-js'></script>
    <script type='text/javascript' src='https://hajimecreate.com/wp-content/plugins/responsive-lightbox/assets/swipebox/jquery.swipebox.min.js?ver=2.3.2' id='responsive-lightbox-swipebox-js'></script>
    <script type='text/javascript' src='https://hajimecreate.com/wp-includes/js/underscore.min.js?ver=1.13.1' id='underscore-js'></script>
    <script type='text/javascript' src='https://hajimecreate.com/wp-content/plugins/responsive-lightbox/assets/infinitescroll/infinite-scroll.pkgd.min.js?ver=5.8.1' id='responsive-lightbox-infinite-scroll-js'></script>
    <script type='text/javascript' id='responsive-lightbox-js-extra'>
    /* <![CDATA[ */
    var rlArgs = {"script":"swipebox","selector":"lightbox","customEvents":"","activeGalleries":"1","animation":"1","hideCloseButtonOnMobile":"0","removeBarsOnMobile":"0","hideBars":"1","hideBarsDelay":"5000","videoMaxWidth":"1080","useSVG":"1","loopAtEnd":"0","woocommerce_gallery":"0","ajaxurl":"https:\/\/hajimecreate.com\/wp-admin\/admin-ajax.php","nonce":"9f413b861c"};
    /* ]]> */
    </script>
    <script type='text/javascript' src='https://hajimecreate.com/wp-content/plugins/responsive-lightbox/js/front.js?ver=2.3.2' id='responsive-lightbox-js'></script>
    <script type='text/javascript' src='https://hajimecreate.com/wp-content/plugins/wp-user-avatar/assets/flatpickr/flatpickr.min.js?ver=5.8.1' id='ppress-flatpickr-js'></script>
    <script type='text/javascript' src='https://hajimecreate.com/wp-content/plugins/wp-user-avatar/assets/select2/select2.min.js?ver=5.8.1' id='ppress-select2-js'></script>
    <script type='text/javascript' src='https://hajimecreate.com/wp-content/themes/wp-hajime2021/js/svgxuse.min.js?ver=5.8.1' id='svgxuse-js'></script>
    <script type='text/javascript' src='https://hajimecreate.com/wp-content/themes/wp-hajime2021/js/slick/slick.min.js?ver=5.8.1' id='slick-js'></script>
    <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/shuffle-text@0.3.0/build/shuffle-text.min.js?ver=1634087549' id='shuffle-js'></script>
    <script type='text/javascript' src='https://hajimecreate.com/wp-content/themes/wp-hajime2021/js/validationEngine/jquery.validationEngine.js?ver=1634087549' id='valEngine-js'></script>
    <script type='text/javascript' src='https://hajimecreate.com/wp-content/themes/wp-hajime2021/js/validationEngine/jquery.validationEngine-ja.js?ver=1634087549' id='valEngineJa-js'></script>
    <link rel="https://api.w.org/" href="https://hajimecreate.com/wp-json/" /><link rel="alternate" type="application/json" href="https://hajimecreate.com/wp-json/wp/v2/pages/5" /><link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://hajimecreate.com/xmlrpc.php?rsd" />
    <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="https://hajimecreate.com/wp-includes/wlwmanifest.xml" />
    <meta name="generator" content="WordPress 5.8.1" />
    <link rel='shortlink' href='https://wp.me/P9lQxV-5' />
    <link rel="alternate" type="application/json+oembed" href="https://hajimecreate.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fhajimecreate.com%2F%25e3%2581%258a%25e3%2581%258b%25e3%2582%2584%25e3%2581%25be%25e5%25ad%2590%25e8%2582%25b2%25e3%2581%25a6%25e5%25bf%259c%25e6%258f%25b4%25e5%25ae%25a3%25e8%25a8%2580%25e4%25bc%2581%25e6%25a5%25ad%25e3%2580%258c%25e3%2582%25a2%25e3%2583%2589%25e3%2583%2590%25e3%2583%25b3%25e3%2582%25b9%25e4%25bc%2581%25e6%25a5%25ad%25e3%2580%258d%2F" />
    <link rel="alternate" type="text/xml+oembed" href="https://hajimecreate.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fhajimecreate.com%2F%25e3%2581%258a%25e3%2581%258b%25e3%2582%2584%25e3%2581%25be%25e5%25ad%2590%25e8%2582%25b2%25e3%2581%25a6%25e5%25bf%259c%25e6%258f%25b4%25e5%25ae%25a3%25e8%25a8%2580%25e4%25bc%2581%25e6%25a5%25ad%25e3%2580%258c%25e3%2582%25a2%25e3%2583%2589%25e3%2583%2590%25e3%2583%25b3%25e3%2582%25b9%25e4%25bc%2581%25e6%25a5%25ad%25e3%2580%258d%2F&#038;format=xml" />
    <link rel='dns-prefetch' href='//v0.wordpress.com'/>
    <style type='text/css'>img#wpstats{display:none}</style><style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
    <!-- BEGIN: WP Social Bookmarking Light HEAD --><script>
    (function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s);
    js.id = id;
    js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.7";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
    </script>
    <style type="text/css">.wp_social_bookmarking_light{
    border: 0 !important;
    padding: 10px 0 20px 0 !important;
    margin: 0 !important;
    }
    .wp_social_bookmarking_light div{
    float: right !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 5px 0px 0 !important;
    min-height: 30px !important;
    line-height: 18px !important;
    text-indent: 0 !important;
    }
    .wp_social_bookmarking_light img{
    border: 0 !important;
    padding: 0;
    margin: 0;
    vertical-align: top !important;
    }
    .wp_social_bookmarking_light_clear{
    clear: both !important;
    }
    #fb-root{
    display: none;
    }
    .wsbl_facebook_like iframe{
    max-width: none !important;
    }
    .wsbl_pinterest a{
    border: 0px !important;
    }
    </style>
    <!-- END: WP Social Bookmarking Light HEAD -->
    <!-- Jetpack Open Graph Tags -->
    <meta property="og:type" content="website" />
    <meta property="og:title" content="【岡山】集客設計に自信あり。ホームページ制作・ECサイト運営はハジメクリエイト" />
    <meta property="og:description" content="人と人、人とコンピュータをつなぐ。" />
    <meta property="og:url" content="https://hajimecreate.com/" />
    <meta property="og:site_name" content="【岡山】集客設計に自信あり。ホームページ制作・ECサイト運営はハジメクリエイト" />
    <meta property="og:image" content="https://hajimecreate.com/wp-content/uploads/2021/06/1d5382c379aced1c6607cc8218a1e350-725x1024.jpg" />
    <meta property="og:image:width" content="725" />
    <meta property="og:image:height" content="1024" />
    <meta property="og:locale" content="ja_JP" />
    <meta name="twitter:text:title" content="おかやま子育て応援宣言企業「アドバンス企業」に認定されました" />
    <meta name="twitter:image" content="https://hajimecreate.com/wp-content/uploads/2021/06/1d5382c379aced1c6607cc8218a1e350-725x1024.jpg?w=1400" />
    <meta name="twitter:card" content="summary_large_image" />
    <!-- End Jetpack Open Graph Tags -->
    <link href="https://hajimecreate.com/wp-content/themes/wp-hajime2021/style.css" rel="stylesheet">
    <link href="https://hajimecreate.com/wp-content/themes/wp-hajime2021/style_sp.css" rel="stylesheet">
    </head>
    <body>
    <div id="loading"></div>
    <div id="pageTop">
    <a href="#page" class="pageTop inPageLinks">
    <svg>
    <use xlink:href="https://hajimecreate.com/wp-content/themes/wp-hajime2021/images/symbol.svg#icon-angle_double_top" />
    </svg>
    </a>
    </div>
    <div id="page"></div>
    <div class="container"><!-- container start -->
    <div class="container-main">
    <header class="header">
    <div class="header-btn">
    </div>
    <p class="header-logo">
    <svg>
    <use xlink:href="https://hajimecreate.com/wp-content/themes/wp-hajime2021/images/symbol.svg#icon-logo"/>
    </svg>
    </p>
    <nav>
    <ul class="header-nav">
    <li>
    <a href="https://hajimecreate.com/" class="fz16">ABOUT US</a>
    </li>
    <li>
    <a href="https://hajimecreate.com/" class="fz16">SERVICE</a>
    </li>
    <li>
    <a href="https://hajimecreate.com/" class="fz16">WORKS</a>
    </li>
    </ul>
    </nav>
    </header>
    <article class="top">
    <div class="topKey">
    <div class="topKey-box">
    <h1 class="topKey-ttl">
    <picture>
    <source type="image/webp"
    srcset="https://hajimecreate.com/wp-content/themes/wp-hajime2021/images/top_key_center.webp">
    <img src="https://hajimecreate.com/wp-content/themes/wp-hajime2021/images/top_key_center.png"
    alt="Webとクリエイティブでビジネスをかたちにする" class="imgBk" loading="lazy">
    </picture>
    </h1>
    </div>
    <div class="topKey-cover"></div>
    </div>
    <section class="topImp">
    <h2 class="fz32 ffF1 orange1">大切なお知らせ</h2>
    <div class="topImp-list lh17 fw6">
    <p class="topImp-date fz16 white1">2021/03/31 (水)</p>
    <a href="https://hajimecreate.com/%e3%80%8e%e3%81%8a%e3%81%8b%e3%82%84%e3%81%be%e5%ad%90%e8%82%b2%e3%81%a6%e5%bf%9c%e6%8f%b4%e5%ae%a3%e8%a8%80%e4%bc%81%e6%a5%ad%e3%80%8f%e3%81%ab%e8%aa%8d%e5%ae%9a%e3%81%95%e3%82%8c%e3%81%be%e3%81%97/"
    class="topImp-link fz18 white1 my-shuffle">『おかやま子育て応援宣言企業』に認定されました</a>
    </div>
    </section>
    <section class="topNav">
    <div class="topNav-body">
    <h2 class="topNav-ttl fz32 lh14 blue4 sfz14">
    まずはコチラから
    <span class="fz72 ffLo blue1 sfz30">ハジメクリエイトが<br>できること</span>
    </h2>
    <div class="topNav-group clearfix">
    <a href="" title="WEB制作" class="topNav-link topNav-link1">
    <picture>
    <source type="image/webp" media="(max-width: 1023px)"
    srcset="https://hajimecreate.com/wp-content/themes/wp-hajime2021/images/top_nav1_sp.webp">
    <source media="(max-width: 1023px)"
    srcset="https://hajimecreate.com/wp-content/themes/wp-hajime2021/images/top_nav1_sp.png">
    <source type="image/webp"
    srcset="https://hajimecreate.com/wp-content/themes/wp-hajime2021/images/top_nav1.webp">
    <img src="https://hajimecreate.com/wp-content/themes/wp-hajime2021/images/top_nav1.png"
    alt="WEB制作" class="imgBk" loading="lazy">
    </picture>
    <p class="topNav-txt1">
    WEB制作
    <svg>
    <use xlink:href="https://hajimecreate.com/wp-content/themes/wp-hajime2021/images/symbol.svg#icon-angle_double_right"/>
    </svg>
    </p>
    </a>
    <a href="" title="集客・設計" class="topNav-link topNav-link2">
    <picture>
    <source type="image/webp" media="(max-width: 1023px)"
    srcset="https://hajimecreate.com/wp-content/themes/wp-hajime2021/images/top_nav2_sp.webp">
    <source media="(max-width: 1023px)"
    srcset="https://hajimecreate.com/wp-content/themes/wp-hajime2021/images/top_nav2_sp.png">
    <source type="image/webp"
    srcset="https://hajimecreate.com/wp-content/themes/wp-hajime2021/images/top_nav2.webp">
    <img src="https://hajimecreate.com/wp-content/themes/wp-hajime2021/images/top_nav2.png"
    alt="集客・設計" class="imgBk" loading="lazy">
    </picture>
    <p class="topNav-txt1">
    集客・設計
    <svg>
    <use xlink:href="https://hajimecreate.com/wp-content/themes/wp-hajime2021/images/symbol.svg#icon-angle_double_right"/>
    </svg>
    </p>
    </a>
    <a href="" title="コンサルティング" class="topNav-link topNav-link2">
    <picture>
    <source type="image/webp" media="(max-width: 1023px)"
    srcset="https://hajimecreate.com/wp-content/themes/wp-hajime2021/images/top_nav3_sp.webp">
    <source media="(max-width: 1023px)"
    srcset="https://hajimecreate.com/wp-content/themes/wp-hajime2021/images/top_nav3_sp.png">
    <source type="image/webp"
    srcset="https://hajimecreate.com/wp-content/themes/wp-hajime2021/images/top_nav3.webp">
    <img src="https://hajimecreate.com/wp-content/themes/wp-hajime2021/images/top_nav3.png"
    alt="コンサルティング" class="imgBk" loading="lazy">
    </picture>
    <p class="topNav-txt1 topNav-txt1--c">
    コンサルティング
    <svg>
    <use xlink:href="https://hajimecreate.com/wp-content/themes/wp-hajime2021/images/symbol.svg#icon-angle_double_right"/>
    </svg>
    </p>
    </a>
    </div>
    </div>
    </section>
    <section class="topWorks">
    <div class="topWorks-head">
    <div class="Ttl1 topWorks-ttl">
    <h2 class="Ttl1-txt fz32 fw6 blue4 sfz16">
    お客様にThank you!
    <span class="fz72 blue1 ffLo mt16 sfz32">最新制作実績</span>
    </h2>
    </div>
    </div>
    <div class="topWorks-body">
    <div class="topWorks-img">
    <figure>
    <img src="https://hajimecreate.com/wp-content/uploads/2021/08/c0747a13ece3466b9ff153f3b8500545-400x336.jpg" alt="有限会社グリーンサービス岡崎" loading="lazy">
    </figure>
    </div>
    <div class="topWorks-content">
    <div class="topWorks-content__box">
    <p class="fz24 sfz20">2021/08/27 (金)</p>
    <p class="fz20 fw6 lh15 mt16">有限会社グリーンサービス岡崎</p>
    <p class="fz16 lh20 mt24">
    公開年月:2021年8月 </p>
    <div class="topWorks-content__cate">
    <p class="Cate Cate--blue1">コーポレートサイト</p><p class="Cate Cate--blue1">レスポンシブWebデザイン</p><p class="Cate Cate--blue1">レンタルホームページ</p> </div>
    <a href="" class="Btn1 mt48">
    詳しくはこちら
    <svg>
    <use xlink:href="https://hajimecreate.com/wp-content/themes/wp-hajime2021/images/symbol.svg#icon-angle_double_right"/>
    </svg>
    </a>
    </div>
    </div>
    </div>
    </section>
    <section class="topBlog">
    <div class="topBlog-head">
    <div class="Ttl1 topBlog-ttl">
    <h2 class="Ttl1-txt fz32 fw6 blue4 topBlog-ttl--txt sfz16">
    日々執筆中!
    <span class="fz72 ffLo blue1 sfz32">日々お役立ち情報</span>
    </h2>
    </div>
    </div>
    <div class="topBlog-body">
    <section class="topBlog-box Line1">
    <h3 class="fz56 ffF1 tac sfz36">ブログ</h3>
    <div class="topBlog-group1">
    <div class="topBlog-item1">
    <figure>
    <img src="https://hajimecreate.com/wp-content/uploads/2021/09/21ae1d6c454c2cd2aa251b9b18f8defd-400x265.jpg"
    alt="絵画ってどうみるの? -西洋絵画編-" loading="lazy">
    </figure>
    <div class="topBlog-item1__content">
    <div class="topBlog-item1__icn">
    <img src="https://hajimecreate.com/wp-content/uploads/2020/08/newicon_blog_nakanishi-1-150x150.png"
    alt="アバター" loading="lazy">
    <p>ハリネズミ</p>
    </div>
    <p class="fz18 mt12 blue1 fw6">2021/09/16 (木)</p>
    <p class="fz18 mt8 fw6 lh15 sfz16">絵画ってどうみるの? -西洋絵画編-</p>
    </div>
    <a href="https://hajimecreate.com/labo/%e7%b5%b5%e7%94%bb%e3%81%a3%e3%81%a6%e3%81%a9%e3%81%86%e3%81%bf%e3%82%8b%e3%81%ae%ef%bc%9f%e3%80%80-%e8%a5%bf%e6%b4%8b%e7%b5%b5%e7%94%bb%e7%b7%a8/"></a>
    </div>
    <div class="topBlog-item1">
    <figure>
    <img src="https://hajimecreate.com/wp-content/uploads/2021/07/deb5ec557b0529b069f50bc5c74c2dc6-400x265.jpg"
    alt="もしお客様が聴覚障がい者だったら?" loading="lazy">
    </figure>
    <div class="topBlog-item1__content">
    <div class="topBlog-item1__icn">
    <img src="https://hajimecreate.com/wp-content/uploads/2020/08/newicon_blog_tashima-150x150.png"
    alt="アバター" loading="lazy">
    <p>tashima</p>
    </div>
    <p class="fz18 mt12 blue1 fw6">2021/09/08 (水)</p>
    <p class="fz18 mt8 fw6 lh15 sfz16">もしお客様が聴覚障がい者だったら?</p>
    </div>
    <a href="https://hajimecreate.com/labo/%e3%82%82%e3%81%97%e3%81%8a%e5%ae%a2%e6%a7%98%e3%81%8c%e8%81%b4%e8%a6%9a%e9%9a%9c%e3%81%8c%e3%81%84%e8%80%85%e3%81%a0%e3%81%a3%e3%81%9f%e3%82%89%ef%bc%9f/"></a>
    </div>
    </div>
    <div class="topBlog-btn topBlog-btn--white">
    <a href="">
    loading