オンライン > IT・リスキリング > HTML・CSS > NEXT.JSで作るSEO高評価のコーポレートサイト制作

HTML・CSS Webデザイン

NEXT.JSで作るSEO高評価のコーポレートサイト制作

対面オンライン

今すぐ！SEO評価の高いコーポレートサイトを作りたい方へ

受けた人 6 人

開催回数 4 回

こんなことを学びます

こんにちは、デザイン学校の北野です。

4/29（火・祝）にNEXT.JSを使ったSEO評価の高いコーポレートサイトを構築する講座を開講いたします。

この講座では、NEXT.JS（TypeScript, React）を用いて、モダンなコーポレートサイトを構築するための知識とスキルが学べます。
開発環境の構築から、ページの作成、SEO対策、お問い合わせフォームの実装、モダンなUIの導入、スタイリング、そしてGithubPagesへのデプロイまでを網羅的に学べます。
また、shadcn/uiやTailwind CSSといった最新のUI構築もお伝えします。

□成果物イメージ
https://mori-tt.github.io/corporate-design/

□成果物のPageSpeed Insightsが、スマホで全てのスコアで100点
https://pagespeed.web.dev/analysis/https-mori-tt-github-io-corporate-design/zgbkbbn96b?form_factor=mobile

修了後は授業動画をお送りいたしますので、いつでも復習ができます。
是非、お気軽にご参加ください。

また、オンライン（今回はMac限定）でも受講いただけます。お申し込みの際に「オンライン受講希望」とお伝えください。

Zoom（ズーム）を使って実施いたしますので、お申し込み後ログイン用のURLをお伝えいたします。

Zoom（ズーム）
https://zoom.us/jp-jp/meetings.html

開催日程がありません

開催予定エリア渋谷・恵比寿

価格(税込)¥8,000

現在は開催リクエストを受け付けていません

受けたい

18人が受けたい登録しています

対面受講日程

開催日程はありません。

対面受講料に含まれるもの

参加費以外の費用は一切かかりませんのでご安心ください。
領収書は受講終了後、ストアカの生徒マイページから発行・印刷できますので是非ご利用ください。
https://support.street-academy.com/hc/ja/articles/201345225

オンライン受講日程

開催日程はありません。

オンライン受講料に含まれるもの

この講座の先生

デザイン業界に就職・転職するための学校。

北野智規

2000年大阪芸術大学デザイン学科卒業後、
プロダクションで JR や Wacoal の広告制作に携わる。
退社後、独学で web を学びフリーランスとなる。
2008年、デザイン事務所 ginghami co., ltd. を設立。
CI や、ポスター、web、映像、プロダクトなど、
様々なデザインメディアを制作中。
2010年、2011年 One Show Design にて Merit Award 受賞。
2013年日本パッケージデザイン大賞入賞。

※当日は morimori 先生がご担当いたします。

この講座の主催団体

デザイン業界に就職・転職するための学校。

主催団体確認済み

8,222人
3,920回

イラレ、フォトショの基礎から応用までを指導します！

名刺を作りたいけれどソフトの使い方が分からない、
パスを使ったきれいな線のイラストやロゴを制作したい、
写真の補正やレタッチ・合成をしたい、
編集の仕事で、Indesignのスキルが必要になったなど・・・
ニーズにあったアプリケーションの使い方を、
初心者にも分かりやすく指導します。
　
基礎から、ちょっとしたデザインまで・・・
デザインの現場で実際に使われている... +続きを読む

主催団体に質問する主催団体ページを見る

当日の流れとタイムスケジュール

＜Menu＞
・1. 開発環境構築（事前作業推獎）
・2. 開発の全体像の解説（予習推奨）
・3. Topページの実装1
・4. Topページの実装2
・5. Servicesページとそのカテゴリページの実数、静的ページを生成するための各種実装
・6. Worksページとそのカテゴリページの実装
・7. メタデータ関係の実装
・8. GoogleAnalytics、SearchConsole、サイトマップに関する実装
・9. sitemap.xmlとrobots.txtを生成する処理の実装
・10. Accessページの実装
・11. Aboutページの実装
・12. contactペーンの実数
・13. GoogleFormで「お問い合わせフォーム」を作成
・14. ContactFormの設置（GoogleForm使用）
・15. GithubPagesへデプロイ

参考：StackBlitzでの開発環境構築
参考：GithubとGithubPages
参考：Prettierについて
参考：TypeScriptについて
参考：TypeScriptの基本文法とき方（予習推奨）
参考：Reactにおける開発のポイント（予習推奨）
参考：Next.js15における開発のポイント（予習推奨）
参考：Nextjsのlayout.tsx、動的ルーティング、静的生成（SSG）について（予習推奨）
参考：shadenluiの導入と使い方
参考：TaiwindCSSの使い方（予習推奨）
参考：TalwindCSSまとめ
参考：Next.JsにおけるくLnK>タグと通常のくa>タグについて
参考：lucide-reactの使い方
参考：TaitwindCSSにおけるgroupクラス
参考：OpenGraph（オーブングラフ）
参考：生成AIへの質問の仕方

こんな方を対象としています

HTML, CSS, JavaScriptの基本を理解されている方

受講する際は以下をお読み下さい

当日はお使い慣れたPC（Mac）がございましたらご持参ください。

※ストアカでは講座に適用される保険を用意しています。詳しくはストアカ補償制度をご覧ください。

レビュー2件

楽しかった( 1 )
勉強になった( 2 )
受ける価値あり( 1 )

この講座は「内容がボリューミーな講座」でした

女性

内容がボリューミーで時間がなく、予定していた内容を端折ってしまうなど、少し残念な部分がありました。
コードの解説もありましたが、Reactの経験があまりない私には、かなり難しく感じられました。
もし、参加を検討される方は、少しでもJavaScriptやReactの知識があると良いかと思います。

先生はとても熱心に教えて下さり、必ずデプロイまで導いてくれ、成果物を持ち帰ることができました。

2025年4月受講

この講座は「3時間でバナーが作れるようになる講座でした！」でした