超シンプルなお知らせページ

新型コロナウイルスの緊急事態宣言も再度発令され、仕事やプライベートで急にお知らせページ告知ページを用意してと頼まれることが多くなっていないでしょうか?

しかも、速攻で用意してと言うくせに、1枚ペラでいいけど「レスポンシブ」にしてスマホで見てもいい感じになるように…といったことまで言われてしまうと、しっかり作るのにも少々手数が必要になってしまいます。

そんな方々用に超シンプルなお知らせページ用のHTMLテンプレートを用意してみました。

サンプルデモページ

デモページはこちらからご確認をどうぞ。
テンプレートダウンロードは下の方にご用意いたしました。

超シンプルなお知らせページ用レスポンシブ対応HTMLテンプレート

テンプレートの説明

レスポンシブ対応

それぞれのセクションをレスポンシブ対応として、ヘッダーのロゴとナビゲーションはCSSのFlexboxレイアウトでフレキシブルな並び替えをします。ロゴ画像もスマホ表示で荒く見えないよう、大きなものを半分以下で表示させています。

ソースも超シンプル、レスポンシブなお知らせページテンプレート

とにかくシンプル

かっこいい系のレスポンシブHTMLテンプレートでよくある全画面背景などもなくして、お知らせページ用に使えるよう超シンプルなデザインにしています。

PDFダウンロード用ボタンも設置

お知らせ下部にはPDFダウンロードボタンも設置しておきました。「新型コロナウイルス感染症に関するお知らせ」といったPDFをダウンロードさせたい場合はリンク先にPDFを設定するだけでOKです。

文書的な配置

日付は右側に、文章全体や社名・TELなどは左揃えとして、お役所文書的な雰囲気を出すようしています。

無料です

HTMLソースを見てお分かりのとおり超シンプルなテンプレートですので、商用でも何でも無料で利用可能です。

テンプレートの使い方

ファイル構成

zipファイルには下記のファイルが含まれています。編集後にお持ちのサーバにアップロードしてご利用ください。

/
├ index.html
│
└ /assets
   ├ /css
   │   └ style.css
   └ /img
       ├ favicon.ico
       ├ logo.png
       └ pdf.png

修正する場所

index.html

会社名やお知らせ内容など、〇〇〇〇としてある箇所を修正してください。ヘッダのロゴとナビゲーション(HOME/会社概要)にはリンクが設定してあるので適宜修正してください。

style.css

CSSのカスタムプロパティで色指定をしているので、お好きなカラーコードを設定してください。ボタン・フッターのメインカラー、タイトル・本文の文字色を変更できます。

:root {
	--main-color:#1F85AB;		/*ボタン・フッターなどのメインカラー*/
	--main-title-color: #333;	/*ヘッダータイトルカラー*/
	--main-text-color: #555;	/*本文カラー*/
}

画像素材

ロゴ画像とファビコン画像を入れてあります。お好きな画像に編集ください。

(参考)favicon画像の作り方

ファビコン用画像を調達

ファビコンの元となるようなシンプルな画像をご用意ください。モノトーンのアイコン素材を無料ダウンロード可能な「ICOOON MONO」あたりがおすすめです。

favicon.icoの生成

ファビコンにしたい画像を見つけたら「favicon generator」でfavicon.icoに画像を変換してください。

テンプレートのダウンロードはこちら

デモページでご紹介している超シンプルなレスポンシブテーマをお探しの方は、下のボタンからzipファイルをダウンロードしてご利用ください。

おわりに

シンプルなレスポンシブのHTMLテンプレートは探せば色々とありますが、お知らせページ専用の超シンプルなHTMLテンプレートでレスポンシブなものだとあまりなく、1から作るか、かっこいいテンプレートを削ってシンプルにするかしかなかったので用意をしてみました。

簡単なお知らせページであれば、テンプレを元に1時間もかからずに制作できると思います。シンプルなお知らせページを急ぎで作れと言われた際などに是非ご利用ください。