清潔感と信頼性を出すヘッダー画像を作る
私が作成した企業用ホームページサンプルは、無料画像素材サイトで拾ったものに、SIRIUS(シリウス)のヘッダー画像作成機能で文字入れしたものです。
→企業用ホームページサンプルはこちら。
今回はこの方法を具体的に解説します。
1.商用に使える無料素材画像を入手する
自社で使いたい画像があれば、それを予め用意します。綺麗に撮れるデジカメの画像がオススメです。
もし画像の用意が無ければ、以前こちらで紹介しているサイトで画像をダウンロードしておきます。
2.ヘッダー画像の大きさに切り取る
今回は例として、温泉の画像をヘッダー画像に作り替えてみます。無料素材で入手。
画像の大きさは1024x684ピクセルのものです。
ここから、SIRIUS(シリウス)のヘッダー画像サイズである900x200ピクセルを切り取ります。
今回はPhotoFiltreという無料ソフトを使います。
トリミングが出来るのであれば、他のソフトでもOKです。
→画像の切り取り方法参考ページはこちら
PhotoFiltreを起動させたら、素材画像をドラッグ&ドロップします。
PhotoFiltreの便利な点は、選択範囲のピクセル大きさが画面下部に表示されていることです。
画面下に表示されている選択部分の大きさを見ながら、マウスで切り取る範囲を選択します。
900x200pxになるように選択します。
右クリックして、トリミングを選択。
900x200pxの大きさで切り取りました。これでヘッダー画像の素材は完成です。
この画像をファイル → 名前を付けて保存 します。
元の画像の質にもよりますが、拡張子をjpgにするかpngにするか選択することがあります。
png画像は透過画像が作成でき、jpgよりも綺麗な画像になるかわりに、画像ファイルサイズが重くなります。
jpg画像はpngに比べると画質は劣りますが、画像が軽いです。
ヘッダー画像のファイルサイズが重いとページの読み込みに時間がかかります。
これはユーザビリティとSEOにも悪い影響がある為、なるべくjpg画像を使用しましょう。
jpg画像でも綺麗なものであれば、さらにphotofiltreでファイル保存の際に圧縮してもOKです。
3.ヘッダーに文字を入れる
では切り取った素材に文字を入れます。
シリウス編集画面 「編集」 → 「ヘッダー画像」をクリックします。
編集する画像ファイル選択を求められるので、先ほど切り取った画像を選択してください。
ではここから文字入れスタートです。
編集に使うのは主に1~6のボタンです。
ありえない程簡単に操作できるように作られた機能ですので、実際に触った方が早いので詳しくは説明しません。
ポイントだけ説明しておきます。
- 企業サイトであれば、ヘッダーに使うフォントは「HGS明朝」がオススメです。
- 縁取りや反射効果の多用は控えた方が、シンプルで落ち着ついた印象になります。
- 詳細設定ではシャドウの深さ、縁取りの太さを変更します。
- 画像に対して見やすい文字色を考え抜きましょう。
4.設定の保存~画像の出力
ヘッダ画像が作成出来たら、「設定を保存」をクリック。
この保存をしておくと、ヘッダーの編集内容が保存されるファイル(dicファイル)が出来上がります。
後で文字の位置や文字内容を変更したい時は、「設定を開く」でファイルを読み込ませれば再編集が出来ます。
必ず「設定の保存」はしておきましょう。
あともう少しです。画像出力をクリック。フォルダが自動的に開きますが、このまま保存しません。
フォルダ「SIRIUS」をクリックした後に現れる、「Images」フォルダにお好みの名前を付けて保存します。
5.自作ヘッダー画像をホームページに適用させる
最後です。サイト全体設定をクリック。
「参照」をクリックして、自作したヘッダー画像を選択して終了です。
これでホームページにヘッダー画像が反映されました。
私の企業ホームページサンプルは、4枚の画像を切り替えるカスタマイズをしています。
マナの購入者様専用サイトで方法を公開しています。
こうやって具体的に説明すると長いですが、実際操作すると10分もかかりません。
画像の出力のフォルダ選択が落とし穴です。ここ注意です。
次は上部ロゴ画像の作成方法です。
ツイート
関連ページ一覧
サイト全体設定が大切 | SIRIUSシリウスソフトで企業ホームページ作成
SIRIUS(シリウス)を起動して、「新規作成」をクリックしてホームページ作成を開始します。すると「サイト全体設定」が表示されます。サイト全体設定は、社長を誰にするか並に大切な部分です。ポイントをしっかり押さえて記入しましょう。サイト全体設...
ヘッダー画像の作成方法 | シリウスで企業ホームページソフト
次はヘッダー画像を作成して設置します。私が作成した企業用ホームページサンプルは、無料画像素材サイトで拾ったものに、SIRIUS(シリウス)のヘッダー画像作成機能で文字入れしたものです。→企業用ホームページサンプルはこちら。今回はこの方法を具...
会社ロゴ画像の作成設置方法 | SIRIUSソフトで企業ホームページ作成
企業ホームページによく見られる、上部に会社名とロゴを作成設置する方法です。1.ロゴテキスト画像機能でSIRIUS(シリウス)上部 編集 → ロゴテキスト画像をクリック。ビジネステンプレート上部に差し込むロゴの大きさは、幅は300px~最大6...
トップページとエントリーページの作成 | SIRIUSソフトで企業ホームページ作...
このページではSIRIUS(シリウス)で企業ホームページを作成する際の、トップページとエントリーページ作成方法を解説します。※トップページだけを1カラムにカスタマイズする方法はこちらをご覧ください他の企業サイトを見習うどういうレイアウトにす...
テーブルタイプの画像メニュー作成方法 | SIRIUSソフトで企業ホームページ作...
前回はメニューに使う画像を作成しました。今回はその画像を使って、トップページに配置している画像メニューを作成します。SIRIUS(シリウス)は基本的に直感的な操作で使えてしまうのですが、購入後スムーズに作成出来るよう手順を紹介しておきます。...
サイト分析ツールを設置する | SIRIUSソフトで企業ホームページ作成
ホームページが大体完成したら、GoogleウェブマスターツールとGoogleアナリティクスを設置します。どんなホームページでも必ず設置しましょう。分析ツール設置の目的GoogleウェブマスターツールとGoogleアナリティクス設置の目的をざ...
SIRIUSで集客・販促のホームページを作る方法 | SIRIUSシリウスソフト...
今回は久々に企業・個人事業主さん向けのお話しです。SIRIUS(シリウス)で集客用・販促用のホームページは作れますか?作れます。集客・販促用のホームページは、どんなソフトやツールでも作る事ができます。必要なものは「どんなコンテンツを作るか?...