清潔感と信頼性を出すヘッダー画像を作る

SIRIUSシリウスヘッダー画像作成方法

次はヘッダー画像を作成して設置します。

私が作成した企業用ホームページサンプルは、無料画像素材サイトで拾ったものに、SIRIUS(シリウス)のヘッダー画像作成機能で文字入れしたものです。

 

企業用ホームページサンプルはこちら。

 

今回はこの方法を具体的に解説します。

 

1.商用に使える無料素材画像を入手する

自社で使いたい画像があれば、それを予め用意します。綺麗に撮れるデジカメの画像がオススメです。

 

もし画像の用意が無ければ、以前こちらで紹介しているサイトで画像をダウンロードしておきます。

 

2.ヘッダー画像の大きさに切り取る

SIRIUSシリウスヘッダー画像切り取り

 

今回は例として、温泉の画像をヘッダー画像に作り替えてみます。無料素材で入手。
画像の大きさは1024x684ピクセルのものです。

 

ここから、SIRIUS(シリウス)のヘッダー画像サイズである900x200ピクセルを切り取ります。

 

今回はPhotoFiltreという無料ソフトを使います。
トリミングが出来るのであれば、他のソフトでもOKです。

 

画像の切り取り方法参考ページはこちら

 

 

SIRIUSシリウスヘッダー画像のトリミング方法1

 

PhotoFiltreを起動させたら、素材画像をドラッグ&ドロップします。
PhotoFiltreの便利な点は、選択範囲のピクセル大きさが画面下部に表示されていることです。

 

 

SIRIUSシリウスヘッダー画像のトリミング方法2

 

画面下に表示されている選択部分の大きさを見ながら、マウスで切り取る範囲を選択します。
900x200pxになるように選択します。

 

 

SIRIUSシリウスヘッダー画像のトリミング方法3

 

右クリックして、トリミングを選択。

 

 

SIRIUSシリウスヘッダー画像のトリミング方法4

 

900x200pxの大きさで切り取りました。これでヘッダー画像の素材は完成です。

 

この画像をファイル → 名前を付けて保存 します。

 

画像の拡張子について

管理人マナ画像右

 

元の画像の質にもよりますが、拡張子をjpgにするかpngにするか選択することがあります。
png画像は透過画像が作成でき、jpgよりも綺麗な画像になるかわりに、画像ファイルサイズが重くなります。

 

jpg画像はpngに比べると画質は劣りますが、画像が軽いです。

 

ヘッダー画像のファイルサイズが重いとページの読み込みに時間がかかります。
これはユーザビリティとSEOにも悪い影響がある為、なるべくjpg画像を使用しましょう。

 

jpg画像でも綺麗なものであれば、さらにphotofiltreでファイル保存の際に圧縮してもOKです。


3.ヘッダーに文字を入れる

SIRIUSシリウスヘッダー画像作成機能

 

SIRIUSシリウスヘッダー画像作成機能新規作成
では切り取った素材に文字を入れます。

 

シリウス編集画面 「編集」 → 「ヘッダー画像」をクリックします。
編集する画像ファイル選択を求められるので、先ほど切り取った画像を選択してください。

 

 

SIRIUSシリウスヘッダー画像作成開始画面

 

ではここから文字入れスタートです。

 

 

SIRIUSシリウスヘッダー画像作成方法

 

編集に使うのは主に1~6のボタンです。
ありえない程簡単に操作できるように作られた機能ですので、実際に触った方が早いので詳しくは説明しません。
ポイントだけ説明しておきます。

 

  • 企業サイトであれば、ヘッダーに使うフォントは「HGS明朝」がオススメです。
  • 縁取りや反射効果の多用は控えた方が、シンプルで落ち着ついた印象になります。
  • 詳細設定ではシャドウの深さ、縁取りの太さを変更します。
  • 画像に対して見やすい文字色を考え抜きましょう。

 

 

4.設定の保存~画像の出力

SIRIUS(シリウス)ヘッダー画像作成方法保存

 

ヘッダ画像が作成出来たら、「設定を保存」をクリック。
この保存をしておくと、ヘッダーの編集内容が保存されるファイル(dicファイル)が出来上がります。
後で文字の位置や文字内容を変更したい時は、「設定を開く」でファイルを読み込ませれば再編集が出来ます。

 

必ず「設定の保存」はしておきましょう。

 

 

SIRIUS(シリウス)ヘッダー画像出力

 

ここは要注意

あともう少しです。画像出力をクリック。フォルダが自動的に開きますが、このまま保存しません。

 

フォルダ「SIRIUS」をクリックした後に現れる、「Images」フォルダにお好みの名前を付けて保存します。

 

5.自作ヘッダー画像をホームページに適用させる

SIRIUSシリウスサイト全体設定

 

最後です。サイト全体設定をクリック。

 

 

SIRIUSシリウスヘッダー画像選択

 

「参照」をクリックして、自作したヘッダー画像を選択して終了です。
これでホームページにヘッダー画像が反映されました。

 

私の企業ホームページサンプルは、4枚の画像を切り替えるカスタマイズをしています。
マナの購入者様専用サイトで方法を公開しています。

 

管理人マナ画像右

 

こうやって具体的に説明すると長いですが、実際操作すると10分もかかりません。

 

画像の出力のフォルダ選択が落とし穴です。ここ注意です。

 

次は上部ロゴ画像の作成方法です。


 このエントリーをはてなブックマークに追加 
新作はお陰様で大好評頂いております!2018年12月31日迄で特別特典にてキュート版配布 SIRIUS特典テンプレートfinegrandバナー

関連ページ一覧

サイト全体設定が大切 | SIRIUSシリウスソフトで企業ホームページ作成

SIRIUSシリウスサイト全体設定方法

SIRIUS(シリウス)を起動して、「新規作成」をクリックしてホームページ作成を開始します。すると「サイト全体設定」が表示されます。サイト全体設定は、社長を誰にするか並に大切な部分です。ポイントをしっかり押さえて記入しましょう。サイト全体設...

続きを読む

ヘッダー画像の作成方法 | シリウスで企業ホームページソフト

SIRIUSシリウスヘッダー画像作成方法

次はヘッダー画像を作成して設置します。私が作成した企業用ホームページサンプルは、無料画像素材サイトで拾ったものに、SIRIUS(シリウス)のヘッダー画像作成機能で文字入れしたものです。→企業用ホームページサンプルはこちら。今回はこの方法を具...

続きを読む

会社ロゴ画像の作成設置方法 | SIRIUSソフトで企業ホームページ作成

SIRIUSシリウス企業ロゴ作成と設置

企業ホームページによく見られる、上部に会社名とロゴを作成設置する方法です。1.ロゴテキスト画像機能でSIRIUS(シリウス)上部 編集 → ロゴテキスト画像をクリック。ビジネステンプレート上部に差し込むロゴの大きさは、幅は300px~最大6...

続きを読む

トップページとエントリーページの作成 | SIRIUSソフトで企業ホームページ作...

SIRIUSシリウス企業ホームページレイアウト作成例

このページではSIRIUS(シリウス)で企業ホームページを作成する際の、トップページとエントリーページ作成方法を解説します。※トップページだけを1カラムにカスタマイズする方法はこちらをご覧ください他の企業サイトを見習うどういうレイアウトにす...

続きを読む

テーブルタイプの画像メニュー作成方法 | SIRIUSソフトで企業ホームページ作...

SIRIUSシリウス企業ホームページレイアウト作成例

前回はメニューに使う画像を作成しました。今回はその画像を使って、トップページに配置している画像メニューを作成します。SIRIUS(シリウス)は基本的に直感的な操作で使えてしまうのですが、購入後スムーズに作成出来るよう手順を紹介しておきます。...

続きを読む

サイト分析ツールを設置する | SIRIUSソフトで企業ホームページ作成

SIRIUSシリウス企業ホームページにGoogleSEO

ホームページが大体完成したら、GoogleウェブマスターツールとGoogleアナリティクスを設置します。どんなホームページでも必ず設置しましょう。分析ツール設置の目的GoogleウェブマスターツールとGoogleアナリティクス設置の目的をざ...

続きを読む

SIRIUSで集客・販促のホームページを作る方法 | SIRIUSシリウスソフト...

今回は久々に企業・個人事業主さん向けのお話しです。SIRIUS(シリウス)で集客用・販促用のホームページは作れますか?作れます。集客・販促用のホームページは、どんなソフトやツールでも作る事ができます。必要なものは「どんなコンテンツを作るか?...

続きを読む


SIRIUSの機能解説 限定特典ご案内 限定特典付き購入方法 カスタマイズ&小技 アフィリエイトログ