top of page
kiharay
2021年6月22日

コーポレートサイトをGatsby+TailwindCSSで自作チャレンジ

更新日：2023年2月25日

中小企業とコーポレートサイト

中小企業にとってコーポレートサイトを作る、という仕事は本業がIT関連でなければ中々手出しができないですよね。ホームページを作ったのが10年前、20年前なんてこともあったり、更新履歴が2015年で止まっていたり。。。 ホームページ制作会社を探して、よく分からないけど提案をうけて、値切って、色々提出しなければいけなくて。。。


しかし、パソコンやインターネットがここまで普及していると、ホームページを持たない会社というのはないと思います。そうすると、ホームページは会社の玄関窓口みたいなものです。

会社の玄関に10年前の商品看板を置くことがないように、ホームページを整えるのは会社の玄関を掃除するようなものです。


最近のホームページ（Web）製作周りの技術の進歩は著しくて、見た目がいけてるサイトを比較的簡単に作ることができるフレームワークがいくつも登場しています。YouTubeとかプログラミングアプリでちょっと勉強して、Web製作に片足を突っ込んだ若い人って多いのではないでしょうか？もちろん私もその内の一人です。


ということで、ここから本題。雰囲気かっこいい見た目のコーポレートサイトを、人気のフレームワークを使って自分で作ってみちゃいます。チャレンジ！


最新技術を使ってホームページの作成

さて、方針は以下のような感じで進めます。

  1. 恥ずかしくないくらいのカッコよさを目指す！

  2. フレームワークは人気っぽいものを適当に選ぶ！

  3. 問い合わせフォームとか記事管理はとりあえずやらない


１．恥ずかしくないくらいのカッコよさを目指す！

本当にかっこいいホームページは専門業者の方に任せましょう。ぱっと見て恥ずかしくないくらいを目指します。また、ホームページの重要な役割としては採用情報の提供があります。新卒の学生や若い転職者が見たときに、「古っ！！ここ大丈夫かよ。。。」と思われないためにもモバイル端末で見られることを前提とします。


２．フレームワークは人気っぽいものを適当に選ぶ！

専門的な良し悪しは専門家に任せましょう。「2021 フレームワーク」で検索してトップに出てくるものでいいでしょ！


３．問い合わせフォームとか記事管理はとりあえずやらない

高望みはしません。まずはそれっぽく作るのが大切なのです。企業サイトだと問い合わせフォームは必須だし、更新情報や採用情報はCMSを使って管理したくなるけど、高望みはしません。もしかしたら作っていく過程で機能追加していくかもしれないけど、まずは目標とはしません。


恥ずかしくないくらいのカッコよさを目指すデザインは？

コーポレートサイトをまとめているサイトは色々あります。流行りもありますが、こういうサイトを巡回して好きなデザインを探して、それを目標に作り出します。

参考にしたいポイントは主に以下のような感じです。

  • ヘッダー

  • フッター

  • メニュー

  • トップページの一番上の部分（一番目立つ部分）

サイト集を眺めていると、やはり「トップページ」と「自社製品・サービス」に一番特徴が出ていますね。ここに独自性を出して、他にはないかっこいいホームページにしたいのなら専門のホームページ制作会社に委託しましょう。

ここで目指すのは、ぱっと見た時にちょっとかっこいいな、って思って恥ずかしくないレベルです。 ここで目指すものは以下のように決めました。とりあえず、こんな感じを目指していきましょう。


フレームワークはGatsby + Tailwind CSSを選んでみる

タイトルにもあるReact+Gatsby+Tailwind CSSを選びました。

Reactは人気っぽいし、知り合いのかっこいい人が使っているので選びました。大した理由ではないです笑

Gatsbyは静的サイトジェネレーターとして人気っぽいので採用。この静的サイトジェネレーターっていうのはコーポレートサイトと相性が良いと思うのですよね。とにかく早く表示できるサイトが作れる、というのはコーポレートサイトにとって非常に良いと思いました。

Tailwind CSSも知り合いのかっこいい人がSNSでおススメしていたので採用します。これも大した理由ではないです笑

ちなみに、この組み合わせで非常に分かりやすくセットアップを説明している方がいます。私も参考にさせていただいたので、この記事を読んでいる方は是非併せて読んでみてください。


実際に作るときのセットアップは上のサイトを参考にして下さい。この手順がすべて済んでいる前提で色々な説明をしていきます。


まずは試しにFooterを作ってみる。

千里の道も一歩から。下に張り付いて、コピーライトが書いてある単純なフッターからスタートしていきます。まずはHTML構造から記載。

import React from "react"

const Footer = () => (
<footer>
  <div>
    <p>
      Copyright (C) XXXXXX All Rights Reserved.
    </p>
  </div>
</footer>
)

export default Footer;

ここにTailwind CSSのClassを当てて、それっぽい見た目にしていきます。

import React from "react"

const Footer = () => (
<footer>
  <div className="flex items-center justify-center w-full h-10 bg-black">
    <p className="text-xs text-white ">
      Copyright (C) XXXXXX All Rights Reserved.
    </p>
  </div>
</footer>
)

export default Footer;

ね。簡単でしょ。

・・・そんな訳なくて、ここ素人プログラマーはこれを作るのにも色々調べないと出来ないのです。でもCSSスタイルをTailwind CSSが定めたルールの中から選んで当てていく、って作業は素人目線だとやりやすいですね。自由度が高すぎると何をしたらいいか分からないし、色々出来ます、って言われても困るし。。。


これから継続的に四苦八苦しながら作り出したコードを記事にしていくので、興味がある方はブログをウォッチしてください。


Comments

bottom of page