【超初心者のためのウェブサイト作り】レイアウトとイメージ

【超初心者のためのウェブサイト作り】レイアウトとイメージ

【インターネット集客の軸】ウェブサイト製作編Vol.3「レイアウトとイメージを固める」

前2回まででウェブサイトの土台は出来上がりました。

実際にワタクシが使っているさくらインターネットで新たにドメインを取りSSLなどの設定しWordPressをインストールしていく様を公開します。隠れ家の新規客獲得を目指し一緒にサイトを作っていきましょう!2019年最新版です。
【超初心者向け】集客のためのウェブサイト作成Vol,2。ワードプレスのテーマと各種プラグインインストール

で、今後の作業は・・・

  • レイアウトを考えつつロゴやヘッダーのイメージなどのビジュアル作り
  • トップページと最低限必要なページの作成
  • 更新コンテンツ(ブログ・SNS)などをジャンジャン更新!

という流れになります。
写真やイラストなどの画像素材と自分の言葉で綴った文章が無いと進めません。もし、アナライジングが終わっていない人はココからやり直しです。

レイアウトとイメージ

【インターネット集客の軸】ウェブサイト製作編Vol.3「レイアウトとイメージを決め固定ページを作る」
【インターネット集客の軸】ウェブサイト製作編Vol.3「レイアウトとイメージを決め固定ページを作る」

まず管理画面にログイン。左上の「サイトを表示」から表向きのサイトが今どうなっているかを確認してみましょう。

【インターネット集客の軸】ウェブサイト製作編Vol.3「レイアウトとイメージを決め固定ページを作る」

ま、基本的にまだ何もありません。まずはわかりやすいところから・・・

  • 左上にテキスト(文字)で表示されているサイト名をロゴ画像に置き換える
  • 大きなヘッダー画像(スライドショー)をオリジナルに変更する

作業をしていきましょう。
ロゴは280×60px(ピクセル)、ヘッダー画像は1600×600pxでサイズを合わせて画像を作ります。

んが、ここが素人には1番ハードルが高いところです。サイトの顔になりますから、一度自分でトライしてみてまるでダメだと思ったら外注したほうが良いです。

今はクライドワークスとかランサーズとか、フリーランスの方々へ直接お仕事を依頼できるサービスが沢山あります。ひとつ2000円も出せばきちんとしたものが手に入るようなので、散々時間かけて汚いロゴやヘッダー作るより良いです。

詳しく解説してくれているサイトは沢山あります。ココとかココとか見ながらどうぞ!

ゆくゆくは画像ソフトなども自分で使えたほうが良いのは確かですから少しずつ練習して使えるようになっていきましょう。

ロゴに関しては『ロゴメーカー』とかで検索を掛けると結構使えるツールが見つかります。ヘッダーも写真で勝負して文字入れするだけなら今やスマホでも出来ますね。 こんな↓クラウドツールもあるので紹介しておきます。

Create beautiful designs with your team. Use Canva's drag-and-drop feature and layouts to design, share and print business cards, logos, presentations and more.

ロゴ挿入

画像ソフトやオンラインツールを使ってとにかく280×60px(なるべく近い値)のロゴ画像を作成したらサイトに挿入します。

ロゴの挿入は外観ーカスタマイズとすすむ

左メニューの「外観」から「カスタマイズ」と進み・・・

「ロゴの挿入」カスタマイズのLightning デザイン設定

「カスタマイズ」の左メニュー「Lightningデザイン設定」

「ロゴの挿入」ヘッダーロゴ画像の「画像を選択」をクリック

ヘッダーロゴ画像の「画像を選択」

「ロゴの挿入」ファイルのアップロードをクリック

「ファイルをアップロード」を選んで「ファイルを選択」でPC上の画像ファイルを選択するか、画像のファイルをドラッグ&ドロップ。

「ロゴの挿入」画像の代替テキストとタイトルを入力

選択した画像の「代替テキスト(Alt)」と「タイトル」を忘れずに入力。(ここではサイトタイトルが◎)
で最後に右下の「選択」をクリック。

Lightning デザイン設定

ロゴの挿入は以上。ついでに色設定やレイアウト設定なども見ていきましょう。

サイトの色設定

出来れば、メインで使う写真やロゴから抽出した色を #FF9900 などの数値で設定するのが良いですが、良くわからない場合はなるべく近い色を同系色で2色設定します。キーカラー(暗)は言われるまま少し暗い色を選びましょう。

レイアウト

Lightning レイアウト設定

PC閲覧時のサイドバーをどうするか選べますが、スマホやタブレットからの閲覧が増え続けていることを踏まえ、もうサイドバーはいらないかも知れません。

「その他の設定」「最終更新日」はとても大切なのでチェック入れちゃダメ。古い情報に価値はない。情報を見る時は日付の確認がとても大切です。

投稿者は1人なのでわざわざ表示しなくても良いのでチェックをいれます。

ここまでやったら一番上まで戻って「公開」をクリック。

Lightningカスタマイズ

小さな左矢印をクリックしてカスタマイズのトップへ戻ります。
続いて、トップページスライドショーの設定。

Lightning トップページスライドショーの設定
Lightning トップページスライドショーの設定

スライドは全部で5枚。それぞれにテキストとリンクを設定できますが、とりあえず画像を一枚だけ入れてテキストもリンクも入力欄をすべて空にします。
「画像の変更」をクリックしたらロゴを選択した時と同じ手順で画像をアップロードして選択します。 (画像のaltは忘れずに設定。ココはサイトタイトルで)
スライドショーを有効にしたい方はご自身で頑張ってください!

*代替テキスト(alt)は本来、視覚障害者の方が読み上げソフトを使ってサイトを閲覧する場合に、どんな画像があるのかをソフトが読み上げるための情報。画像の代替でテキストを入力しておくつもりで。

【超初心者のためのウェブサイト作り】「Lightning表示設定」PRボックスを非表示

自分のサイトっぽくなってきましたね。
トップページのPRブロックは使わないので、「Lightning PR Block」をクリックして「PR Block を表示」のチェックボックスを外しておきましょう。

ここまでで、大まかなイメージとレイアウトの設定は終了です。
中々大変ですかね?でも20年前だったらもっともっと大変だったんですよ!ツールの進化に感謝しつつ頑張りましょうね。

スマホだけで色々出来てしまう世の中です。ロゴもヘッダー画像も素敵なの作れちゃう無料アプリがきっとあると思います。1900×600px(ピクセル)とか指定ができるかどうか知りませんけど。
時間に余裕があるなら楽しみながら自分でやる。ちょっとでもお金に余裕があるならプロに頼みましょう。

次回からはそれぞれのページを作成していきます。

無料体験受付中

素のままの自分で誰かの役に立つ。オンリーワンの整体師を目指すなら手力整体塾。

当たり前を繋いだ理論と確かな技術を、あなたの強みと合わせて活かせるようにアレンジします。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください