Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
29
Help us understand the problem. What is going on with this article?
@ryo3409

静的なHTMLジェネレータを探してみる~サービス紹介サイトとCMSの間にある溝

More than 5 years have passed since last update.

※記事を読んで、もっといい方法があったら、救ってください(切実)

いま触ってみている静的HTMLジェネレータ

jekyll
-Rubyでできてるけど、ほとんどhtmlの知識だけでPHPテンプレートのようにつかえる静的htmlジェネレータ
メモ:jekill 静的なHTMLジェネレータを使ってみた

Hugo
-Goでできてるけど、ほとんどhtmlの知識だけでPHPテンプレートのようにつかえる知識だけで使える静的サイトジェネレータ
メモ:Hugo サイトジェネレータを使ってみた jekyllと比べて

なんで、いま静的HTMLジェネレータなのか

サービス・商材をWeb上で売るということ、と、CMSの関係

私は普段、自社が提供するサービスや商材を紹介するブランドサイトを運営しています。
スペック的には、レスポンシブなHTML・CSS&JSでフロント、CMSテンプレートカスタマイズ(WordPressなど)、あとは、なんちゃって情報設計です。

サービス・商材紹介サイト運営で向き合わなければならないこと

市場の変化を踏まえて、サービス・商材の内容は変わります。
広告にもそれなりの費用をかけているので、訪れたお客様=広告費が発生しています。
しっかりと受注につなげていく=Webサイトで丁寧に接客する必要があります。

そのため、Webサイトを作ったら終わりではなく、Webサイトを作ってから始まりです。
サービスは動き続け、それゆえに、何かしら継続して更新していく仕組みが必要です。

1ページ1ページ。ビジュアルも情報も丁寧に

・ユーザーの年齢は40~50代。スマホ6割、PC4割。お金に厳しく、安心や信頼を疑います。

 安心や信頼はどこから来るの?
 ・オフィシャル感、アフィリエイトっぽくない
 ・他の人にも利用されている。
 ・メディアに取り上げられている。
 ・サービスについて情報を定期的に発信している専門家であるというアピールが重要になる。

 →記事の更新が必要

 →PCはビジュアルを丁寧に作りあげないとアフィリエイトサイトと思われかねない!
  →1ページ1ページ独自のCSSが必要になる

ユーザーの反応に合わせて、訴求の仕方を変えていく必要がある

・ビジュアル表現、コピーライトを定期的に変更する必要がある

 →頻度高く変更が必要。

お問い合わせにつながらなかったユーザー層をいかにお問い合わせにつなげるか

・ユーザーの反応を分析できる必要がある

 →画像やリンクなどでonClick時にGoogleAnalyticsにイベントを送信するなど、仕掛けを盛り込む必要あり。

会社の事業の中心がエンジニアリングじゃない

・エンジニアが少ない。というか、いない(涙)

 →エンジニアは新サイト立ち上げに、既存サイトの運営保守はエンジニア以外でもある程度やれるようにしたい

WordPressで運営してますが…。WordPressを選択した理由と課題点

普段、WordPressでサイト運営しているのですが、色々違和感というか、これじゃない感を感じ始めてます。

WordPressを選んだ理由

以下の点が割とクリティカルだったのが大きいです。
・記事の更新が必要
・頻度高く変更が必要
・エンジニアは新サイト立ち上げに、既存サイトの運営保守はエンジニア以外でもある程度やれるようにしたい

 →エンジニアの手を介さずに頻度高くサイトを運営できること

そういった中で、利用者も多く(管理画面が使いやすくなっていくことが期待できる)、テンプレートの自由度が高い、WordPressを選択しました。

WordPressの課題点

・動的生成が遅い
・オープンソースの管理画面→攻撃の心配
・1ページ1ページこだわるには結局テンプレート側をいじったり、ショートコードを作ったり、エンジニアがかまざるを得ない
・デザイン経験がない人がビジュアルエディタを使うと、アフィリエイト感溢れるページが生成される。クオリティはデザイナーが握り、マークアップエンジニアがそれを丁寧に再現する繊細さが必要。
・画像やリンクなどでonClick時にGoogleAnalyticsにイベントを送信するなど、仕掛けを盛り込む必要がある。の部分が肥大化してきたので、エンジニアが記事に手を加える必要がある

当初のエンジニアがかまないという点が現実的ではないとなると、逆にエンジニアにとってwordPressのビジュアルエディタでマークアップを生成するのがすごく手間になってきます。
エディターが記事を編集し、デザイナーがビジュアルを作り、マークアップエンジニアがHTML&CSSを作り、エンジニアがWordPressのテンプレートやショートコードを作成し、エンジニアがWordPressの管理画面に適用する。

ではなく、

エディターが記事を編集し、デザイナーがビジュアルを作り、マークアップエンジニアがHTML&CSSを作り公開する。

にしたいわけです。

そこでHTML&CSSの知識だけで、WordPressでテンプレートやショートコードを使うようなWebサイト制作ができないものかと考えていた中で行きついたのが静的HTMLジェネレータです。

いま触ってみている静的HTMLジェネレータ

jekyll
-Rubyでできてるけど、ほとんどhtmlの知識だけでPHPテンプレートのようにつかえる静的htmlジェネレータ
メモ:jekill 静的なHTMLジェネレータを使ってみた

Hugo
-Goでできてるけど、ほとんどhtmlの知識だけでPHPテンプレートのようにつかえる知識だけで使える静的サイトジェネレータ
メモ:Hugo サイトジェネレータを使ってみた jekyllと比べて

この記事書いている人が考えていること

HTML&CSSでのマークアップをまじめに考える
実際にHTML&CSSを書きながら考えていること

29
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ryo3409

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
29
Help us understand the problem. What is going on with this article?