【nocode #08】nicepageでページに画像を配置してみよう
またまたアップデートがありました。
前回に引き続き今回もコンタクトフォーム作成部分の強化が中心で、全体的なインターフェース等の変更や新規機能の追加等ではないようです。
今回のアップデートでバージョンは5.4.1となりましたので、以降はこのバージョンをベースにお話していきます。
と思ったら下書き書いてる間に5.4.4にアップデートされました。
今回のはマイナーアップデートだけど、今年に入ってからアップデートが激しいな。
画像の差し替えや調整
■ヒーローイメージ
これはサイトのトップのいわゆるファーストビューにドーーーン！と表示される大きな画像のこと。
ムービーの場合もあり、その場合は「ヒーロームービー」と言うらしい
これは今回はじめて知った・・・。
「ヒーロー」・・・仮面ライダーとかウルトラマンとかが最初に浮かんできてしまうのだけど・・・。
そういえばこの「ヒーロー」ってなんで「ヒーロー」っていうのかきちんと調べたことなかったなと。
最初に書いたようにドーンとある画像等のこと、ということである理解はあったけど実際どういう意味なの？
やっぱり仮面ライダー的なことなのか？
で、調べてみると上に書いてあるようなことしか出てこないわけで・・・。
ということで「Hero」の意味を調べてみた。
まぁ普通に「勇者」とか「英雄」とか出てくるよね。
で、英語単語って一つの単語にいろんな意味があるじゃないですか。
その中に「Main Character」というのがあって、日本語でいうところの「主人公」になるわけで、
あぁ！！
となって、サイトの主人公・・・まぁ普通に言えば「サイトのメイン（顔）となる画像＝ヒーローイメージ」ということで納得。
というのはとりあえず置いといて。
■「顔」となるのはどんな画像？
意味がわかったところで、サイトの「顔」となる画像を考えてみましょう。
考え方としては、サイトに訪れたユーザーに対して、
このサイトはどんなサイトなのか？
このサイトにはどんな情報があるのか？
このサイトで何ができるのか？
このサイトはどんな体験を提供してくれるのか？
などなどが一瞬でわかるような画像とか映像はなんだろう？
ということを考えながらどのような画像・映像を利用するか決めていきましょう！
とは言うものの、自分個人のイメージを表す画像を選ぶって・・・
激ムズです。
はっきり言って激ムズです。
控えめに言っても激ムズです。
自分のことを自分で客観的にみたり、自分の仕事のことをイメージで表すってかなりの悩みどころではあります。
もうなんかインパクトのみに頼ってしまおうかなと思うくらい。
そういえばむかーしむかし、某ミュージシャンのレコード（レコード！！！）で黒バックに自分の顔のどアップっていうデザインのアルバムジャケットがあって強烈なインパクトだった・・・（誰かわかりますか？イギリスの方ですw。相当昔ですw）。
自分の顔のどアップをヒーローイメージに・・・ってのもありか？？
インパクト大だしそんなサイト見たことないからあったら話題になるかも！？
いやいや、ないな。
ぜんぜん、ないな。
自分シャイなもんで・・・
あ、また脱線した。
本筋に戻ります。
■画像の差し替え
そういえば、ロゴのところで画像の差し替えやアップロードについての話をすっ飛ばしてしまってました。
ということでここで詳しく書きたいと思います。
まずは差し替えたい画像を選択します。
画像エレメントを選択すると、その外枠にそって青い枠が表示されます。
この画像の場合、画像が入っているブロック全体に表示するように設定されているので、正確にはそのブロックが選択されています。
それで、選択すると画像の中央上のほうに画像アイコンが表示されます（赤丸部分）。
ここをクリックすると、イメージ選択のギャラリーパネルが表示されます。
キャプチャは「Pixabay」というフリー画像のサイトからの画像で、nicepageのギャラリーからも一部選択できるようになっています。
このギャラリー内では左のメニューにある「From Nicepage」からもフリーの素材が使えますが、ライセンスの種類によって使えるサイズが異なります。
自分のビジネスプランの契約だと、ヒーローイメージに使えるほど大きなサイズの画像は使えません。
Pixabayのほうの利用は基本的に全て最大サイズの画像が使えるので、ヒーローイメージにも使えます。
「My Images」では現在開発している自分のサイトで使っている画像が一覧表示され、テンプレートを利用していればそのテンプレートで使っている画像もMy Imagesに表示されます。
このギャラリーパネルに表示された画像をクリックすることで、選択した画像を入れ替えることができます。
さて、Pixabayの画像を探してみたのですが、nicepage内からは自然や動物中心であまりイメージ画像がありません。
うーん、なんか合わないな・・・
ということでまずはPixabayのサイトに行って直接探してみます。
うーーーーむ・・・無料だとなかなかいいのがないなぁ
まぁ贅沢言うなって話だよね。
今回はサクッと作るのを目標としているので、画像にもコストをかけずに作りたいと思っています。
もちろん、ヒーローイメージが必ず必要かと言えばそんなことは全くありません。
そういうスペースがなくてもよいし、もし予算に余裕があれば有料の画像を利用してもいいし、フリーの素材（有料も含め）などを使わなくても自分で持っている写真などを使っても全然だいじょうぶです。
しかし、今回は若干無理矢理ですがフリー素材から使うということにしたいので、なんとなくそれっぽいのを探してみました。
結局Pixabayのサイトではなく他のサイトでまぁまぁな感じの画像を見つけたので、それをダウンロードしておきました。
選択した画像をフリー素材のサイトからダウンロードしておいて、My Imagesにアップロードして使います。
まずはギャラリーのMy Imagesに登録しましょう
ギャラリーパネルの左上にある「Upload」をクリックすると、OSのオープンダイアログが開くのでダウンロードしておいた画像を選択します。
すると画像を読み込んだ上で編集エリアで選択していた画像を差し替えて表示してくれます。
とりあえずこんな感じのを選んでみました。
まぁピッタリとは言えないまでも、まぁまぁいいかなという感じなので、とりあえずこれをヒーローイメージとして採用してみましょう。
■画像の表示調整
次は画像の表示調整についてです。
画像を見ると天地が若干冗長な感じがするのと、手をもう少し遠慮がちに表示したいなぁという気がするので、そこを調整していきましょう。
まず、天地をすこしクロップします。
画像を選択して選択枠の上下中央にあるハンドル（赤枠部分）にカーソルを近づけると、カーソルが上下矢印に変わるのでその状態で上下にドラッグします。
すると、こんな感じに天地がクロップされ画像の中心部分に向かって天地が切り取られました。
次に、手の部分にもう少し遠慮してもらうため、画像を全体的に右に寄せてみましょう。
選択した画像のツールバーにある以下の赤枠のアイコンをクリックします。
ここをクリックすると編集エリアの画像が、画像クロップの編集インターフェースに切り替わります。
まず、画像を右に動かしましょう。
画像の上にカーソルを持っていくと、カーソルが十字の矢印に切り替わるのでそのまま画像を右にドラッグ・・・あれ、動かない。
よく見ると画像がブロックの横いっぱいいっぱいなので、これ以上横に動かすことができません。
そこで画像の中央上部にある「Zoom」のスライダーを右に動かして画像の表示部分を中央にズームします。
その上で右にドラッグして表示領域を変更します。
完了したら、右上の「✓」をクリックして調整を完了します。
結果このようになりました。
いい感じじゃないでしょうか。
画像の加工はこれで良いとして、テキストの表示されている黒いエレメントがちょっと大きくて、背景画像とのバランスが悪いのでここも少し小さくしつつ表示するテキストのコピーライティングやデザインも考えていきましょう。
さて、今回はここまで。
次回はテキスト部分の編集をして、ヒーローイメージ部分を完了させましょう。
〜本日の「余談ですが」〜
余談ですが、2月は沖縄！！
ということで沖縄に行くこととなりました。
なんで2月が沖縄かというと・・・わかりません！
飲み屋繋がりの友達と3人で行くことに。
実はそのうちの一人はそこの店主なのだけど、この店主とは、正確には店主夫妻だけど、3回ほどバンコクに現地集合で遊びに行ったこともあり、そんなこんなで沖縄にいくことに。
旅先で飲む酒はとてもうまいのだよ！
そして夏にはまたバンコク集合の計画もあるのだ！
ここ最近は自分が札幌・函館にはまってしまっていたので、前回沖縄行ったのは2019年の10月。
なので沖縄に行くのはおよそ3年半振り。
こんなに長いあいだ沖縄に行かなかったのは、はじめて沖縄に行って以来はじめて。
ん？日本語なんか変か？？
ほぼ毎年、多いときは年2回とか行ってたのに、コロナやら北海道にはまったりやらでしばらく行けなかった・・・（北海道も20代のころは毎年行っていたのだけど・・・）。
やっと沖縄に行けることになりましたよ。
あ、いや、沖縄に帰るだった。
東京生まれの東京育ちのくせに沖縄が好きすぎて、沖縄行くときは「沖縄に帰る」、戻ってくるときは「長期東京出張」ということに勝手に脳内変換されてます。
長い出張だった！笑
はぁ、沖縄楽しみだ！！
この記事が気に入ったらサポートをしてみませんか？