ランディングページ（LP）制作と新しい発見

Posted on by

お久しぶりです。小島です。
年も明けてとうとう2024年ですね！
皆さん、LPという言葉を聞いたことはありますか？？

Web業界でLPとはランディングページのことを指すのですが、聞いたことはあってもざっくりとしか知らないという方も多いかと思います。
弊社ではランディングページ（LP）の制作も行なっているのですが、先日私もLPの制作に携わる機会がありました。
サイトリニューアルとは違う、新しい視点で制作することができ、UIにおいても新しい発見があったので、今回はLPについて掘り下げながら、弊社のLPの制作についてご紹介いたします！

ランディングページ（LP）とは

ランディングページ（Landing Page）とは、検索結果や広告などを経由して訪問者が最初にアクセスするページのことです。
簡単に言えば、広告専用の小さいサイトというイメージです！
訪問者がホームページに着地する（land）、というイメージが語源だそうです。

普段私たちがよく目にするホームページと違い、ランディングページ（LP）はそのサイト自身をみてもらうことが目的ではなく、製品の購入、メールの購読、情報の提供、または他のサイトへの誘導などキャンペーンの目的によって異なります。
弊社では他のサイトへの誘導、つまりLPを依頼してくださった方が広めたいサイトへの誘導のためのLPや、何かアニバーサリーなどの際にプチサイトを作るような目的で制作することが多いです。

以下の2点は弊社の制作実績の一例になります。
ぜひご参考にしてください！

▼千葉西総合病院 ロボット手術センター ダビンチ
https://davinci.chibanishi-hp.or.jp/

▼新東京病院 事務職採用サイト
https://comedical.shin-tokyohospital.or.jp/

ホームページとの違い

ランディングページ（LP）は基本1ページ、または数ページのみで作成されます。ですがホームページは複数のページで構成されており、様々な情報の提供を目的としています。
ものによっては100ページを超えるものもあります！

ランディングページはほぼ一ページで伝えたい情報が完結してしまうのに対し、ホームページなどのWebサイトはユーザーがそれぞれの情報をたどり回っていくようなスタイルとなっています。また、一般的なWebサイトは複数のリンクを持っているのに対し、ランディングページ（LP）はリンクが限定的であるという違いもあります。

ランディングページ（LP）の特徴

一つ目は、縦長のレイアウトであるということです。ランディングページ（LP）は集客や自社サイトへの誘導などを目的とした設計になっているので、情報量が多くなり、縦長のページとなってしまいます。そのため、通常のホームページと比べるとチラシのようなレイアウトになるとこが多いのもその一つの理由です。上から下までざっと眺めるだけで伝えたい情報が入ってくる点がLPの良いところだなと、実際に作る中で私自身感じました！

二つ目は他のページへのリンクが少ないことです。先ほどもこの点について触れましたが、ランディングページ（LP）はお客様の注文やお問い合わせに結びつけることに特化しているからです。ページのリンクを貼りすぎるとお客様がどんどん別のサイトへ分散してしまい、ランディングページ（LP）を作成した目的を達成する確率がぐんと下がってしまいます。そのため、リンクを限定することで目的を達成できるように設計していきます！

三つ目はデザインの自由度が広がるという点です。リンクや階層が限定的であることから、サイドメニューやグルナビなどを作成する必要がなくなり、画面を広々と活用することができます。また、アクセスした人にアピールできるよう通常のホームページより少し派手なデザインであることが多いです。また、サクサクと読み進めてもらうために画像やアニメーションを多様します。実際に私自身がコーディングした際にもアニメーションを複数入れるという依頼があり、動きがたくさんあるページになりました。

 

ランディングページ（LP）のディレクションとデザイン

ホームページの制作と同様にお客様の依頼に合わせ、ディレクターがランディングページ（LP）のディレクションも行います。打ち合わせをしつつお客様の原稿を確認しながら内容を確定し、お見積もりを作成します。ランディングページ（LP）は普段制作しているWebサイトと違い、画像やイラストのイメージが大きく影響するので、イラストの受注も多々あります！弊社にはイラストの制作もできるデザイナーが在籍しておりますのでご興味のある方はぜひご相談ください。

原稿と素材が集まったらデザイナーがデザインを作成していきます。ランディングページ（LP）はスマホでアクセスされることも多いのでPCでの表示だけでなく、スマホ表示のデザインをしっかり作ることも重要になっていきます。特にメインビジュアルのランディングページ（LP）にアクセスした人の第一印象となる大切な部分なので、とてもこだわってデザインを作っていると聞いております。作成したデザイン案をディレクターがお客様にご提案し、意見を擦り合わせながらデザインを作り上げていきます。また、ランディングページ（LP）を作成する際にランディングページ（LP）のバナーのご依頼を受けて作成することもございます。

LPだけでなく、メディアサイトや自社サイトからもLPにアクセスできるように設計することもあります。SEOに特化したランディングページ（LP）にとってより多くの人に知ってもらうことは大切なポイントですのでぜひバナーもご依頼いただければと思います。

ランディングページ（LP）のコーディング

デザインが確定したら実際にコーディングに入っていきます。

私が今回携わったランディングページ（LP）は既に第一弾が公開されているページだったので、ヘッダーやフッターなどの共通パーツは既にできている状態だったため、メインコンテンツと第一弾と第二弾を紐付けるインデックスページ（目次の役割を持つ扉ページ）の作成を行いました。その中でランディングページ（LP）ならではのポイントをいくつかご紹介いたします！

一つ目は動きの大きさです。普段のホームページはアクセスした人がなるべく多くのページを回っていただけるようにうるさいアニメーションは控えてコーディングしていきます。また、画像よりテキストの情報などを優先的に早く読み込むようにするなどの工夫もしております。しかし、ランディングページ（LP）はライトな感覚でサクサク読んでいただくインパクトを作るために大部分のテキストや画像にアニメーションを入れ、イラストの一部分を動かすなど普段と違ったUIで私自身、目的に合わせたコーディングやUIを実践するとても良い経験となりました。

二つ目はスマホ時の表示を強く意識したコーディングです。特に文字の折り返しにはとても力を入れ、どんなサイズの端末でも違和感のない部分で折り返すようコーディングしました。また、メインビジュアルはPC時の表示とは別のものを表示するようにコーディングするなどスマホ時の表示をよりこだわるのもランディングページ（LP）の特徴だなと感じました。

三つ目は動画の編集と埋め込みです。今回のLPでは動画の埋め込みが必要だったのですが、私自身動画の編集や自分が編集した動画の埋め込みは初めてだったので、初めは上手くいくか不安でした。しかし、お客様と擦り合わせながら丁度スクロールしたタイミングで動画が再生されるよう、JavaScriptでプログラミングし、埋め込みました。新しいことに挑戦でき少し自分のスキルアップに繋がったなと感じております。

まとめ

今回はランディングページ（LP）の制作についてご紹介いたしました！
今回の記事を読んで弊社のランディングページ（LP）の制作にご興味を持った方はぜひお問い合わせください！

ご相談はこちらから↓
https://www.medical-design.co.jp/contact/

また弊社ではwebサイト制作のほかにもチラシの作成や、動画制作なども行っていますのでぜひお気軽にご相談ください！
▼webサイト
https://www.medical-design.co.jp/works/web.html
▼グラフィック
https://www.medical-design.co.jp/works/graphic.html
▼写真撮影・動画
https://www.medical-design.co.jp/works/photo.html

Posted in 未分類

GW休業のお知らせ

Posted on by

GW休業日

5月3日（水）〜5月7日（日）まで

誠に勝手ながら、弊社は、上記の期間をGW休業とさせていただきます。
5月8日（月）より、通常営業を開始いたします。
お手数をおかけいたしますが何卒宜しくお願い致します。

Posted in 未分類

WordPressのACFプラグインで取得する日付が1日ずれる

Posted on by

なんかカレンダー作る作業で使ってたACFプラグインのget_field()で拾ってくる日付がずれていたんですが…

以下、Wordpress公式のGoogle翻訳。

https://wordpress.org/support/topic/read-this-first-wordpress-5-3-master-list/#post-12124062

WordPress 5.3では、日付と時刻の処理コードが大幅にアップグレードされました。以前のコードは、PHP 4がまだサポートされていた10年以上前にさかのぼります。これはWordPressのコア全体に散らばっているコードのかなりの部分であり、非常に遅く、パフォーマンスに影響を与えていました。

5.3では、このコードのほとんどがsaner PHP 5.6互換コードで更新または置き換えられました。多くのレガシーが削除されました。ただし、一部のプラグインおよびテーマは、このコードの以前の動作による副作用に依存している場合があります。

このため、一部のプラグインまたはテーマが誤った動作をしている可能性があります。そのようなことの1つdate_default_timezone_set()は、PHPで関数を呼び出すことです。WordPressは、デフォルトのタイムゾーンをUTCに設定し、独自の計算を実行して時間を調整することで機能します。デフォルトのタイムゾーンを誤って他の値に設定すると、これらの計算が不正確になります。WordPressはタイムゾーンの調整を過剰に補償します。

後方互換性のために、プラグインがデフォルトのPHPタイムゾーンを変更しないことが重要です。デフォルトのタイムゾーンは常にUTCに設定する必要があります。タイムゾーンや日付のシフトで見つかった問題は、おそらく間違っているプラ​​グインまたはテーマになります。これは以前のバージョンのWordPressではそれほど重要ではなかったかもしれませんが、WordPressはこれらの新しい関数を古いPHP 4互換コードにますます依存せずに使用しているため、これははるかに重要です。

このような問題のあるプラグインまたはテーマを見つけた場合は、作成者に報告するか、プラグインチームに報告してください。

ってことらしく、タイムゾーン変更するな、変更するようなプラグインは使うな、ってこと見たいです。

サイト全体でWordpressのwp-load.php呼んでる場合にフォームからメールを送るとタイムゾーンがUTCに変わって9時間ずれちゃうので、wp-load.php呼んだ後にdate_default_timezone_set(‘Asia/Tokyo’);してたんですが、これはやらないで、ってことで。

Posted in WordPress

【ランチ会だより番外編】屋上BBQ★

Posted on by

こんにちは！ランチ会係です。
先週の金夜に開催されたBBQの様子をご報告します♪

毎年恒例の夏BBQ！去年はできなかったので久しぶりの開催でした！社長が張り切っていろいろ用意してくれました〜

DSC_3549

エプロンとグローブ装備で準備万全の社長★

DSC_3578

DSC_3570

一生懸命火起こしする社長とその様子を腕組んで眺める社員。。。

DSC_3581

西谷さんも火起こし参戦!!火力上がってきました

DSC_3601

「「「「お肉まだかなー」」」」の顔

DSC_3605

DSC_3607

いい感じに焼けました！！！わーい!!!（鉄板熱い!!!）

DSC_3616

DSC_3621

焼けたお肉をみんなに切り分けてくれるシェフ植村さん。
と、炊きたてのごはんを山盛りよそって走り去る食いしんぼう小谷さん（笑）

DSC_3596DSC_3635

DSC_3637

今回の目玉の淡路姫牛！！とろけるおいしさ！焼き加減も最高でした.+*☆

DSC_3645

次は締めの焼きそば！はりきって作ってくれる武士さん

DSC_3653

ビール片手に…

DSC_3643

DSC_3642

アグレッシブ！！（速すぎてブレブレ）

DSC_3675

具沢山のおいしい焼きそば完成☆

DSC_3676

IMG_6597

最後は大玉のスイカ割り！（なぜか社長持参の斧(!!)で）
佐藤さんが一発で綺麗に真っ二つにしてくれました！すごい！

DSC_3666

スイカも食べてお腹いっぱいでみんな大満足でした^o^
弊社はスタッフ全員シャイなのでテンション高めの写真は少ないですが（笑）普段仕事では関わりの少ないメンバーで話したり、映画やゲームトークで盛り上がったりと各々すごく楽しめました♪
また暖かくなったら開催したいですね！

Posted in 未分類

医業等に係るウェブサイトの監視体制強化事業の開始について

Posted on by

厚生労働省は、不適切な表示やうそ、大げさな表現がなされている医療機関のホームページについて指摘があることをから、一般の方でも通報が出来るウェブサイト「医療機関ネットパトロール」を開始しました。

弊社ではサイト制作の際、ご提供頂いた原稿に目を通させていただいており、気になる表現などは病院様にお伝えする体制をとっております。

 

尚、これまで誇大表現や不適切な表示にあたるような内容はありませんでしたが、今後も引き続き病院様のお手伝いをしていきたいと考えております。

 

PC

Posted in 未分類

【Mac】ウィンドウを隅に寄せるツール「shift」

Posted on by

メディカルデザインの平野です。
Macユーザーの方で、作業中にブラウザやソフトのウィンドウが乱立し、
ウィンドウ管理に困ったことはないでしょうか。
ウィンドウを分割し、隅や片側に寄せてくれるツールが「shift」です。
ショートカットにより、
左右上下に1/2表示、1/4表示、センタリング、最大化、ウィンドウの縮小拡大等が行えるため、
ウィンドウの管理がスムーズに行えます。

 

170721_02

左右1/2分割

170721_01

4つ角1/4分割

 

スクリーンショット 2017-07-21 10.12.48

ショートカット設定画面

 

 

 

shiftのダウンロードはこちらから

Posted in 未分類

【PHP】無名関数で再帰呼び出しの落とし穴

Posted on by

こんにちは。 システム部のたかくです。業務でPHPに触りだしてから2ヶ月ほどになります。 デバッガがないのでステップ実行もない、変数の内容を拾うのにいちいち出力するの煩わしいなどと、 まだまだ開発環境そのものを見直したくて仕方ない時期です。

概要

さて、記事タイトルのお話になります。 “WordPressで、特定のスラッグを持つ最上位の固定ページから、最下位までの固定ページをリスト化する”という処理が必要になりました。 「wp_list_pages()があるじゃないか！」とも思いますが、ただリストが欲しいだけではありません。 適切な形でhtml出力するにあたって細かく制御する必要がありました。 ツリー型の構造を得たいなら再帰の出番です。 諸事情で新しく関数を書き足すことは避けたい状況でしたので、手続き的に書きたいなと思いました。 そうなると無名関数しかないよなーと思い、安易に手を出したら軽くハマってしまったのでその備忘録になります。 （PHPの無名関数は5.3からサポートされているようですよ）

最初に書いたもの

$family = function ($children) use (&$contents) {
    if (count($children) == 0) {
        return;
    } else {
        foreach ($children as $child) {
            // 前処理
            $nextChildren = get_children(array(
                'post_parent' => $child->ID,
                'post_type' => 'page',
            ));
            $family($nextChildren);
            // 後処理
        }
    }
};

$family($firstChildren);

（見づらいですが） 出力したいhtmlテキストの形式が若干特殊なため、最初に該当ページの最上位ページを拾ってからその直下のページだけを$firstChildrenとして取得しています。 それを無名関数に投げて再帰的に呼び出し、前処理と後処理の中で$contentsにhtmlテキストを格納していく、というものです。 変数のキャプチャの仕様はいろんな言語で違うため、真っ先に調べてuseを使うんだなーとぼんやり理解しました。 無名関数も関数の1つであるからか変数のスコープが外側と異なるため、$contentsには参照を渡さなければ処理が値に反映されません。 しかし、これで動いてくれることを期待しましたが見事に実行を停止してしまいます。

なぜなのか

無名関数の中と外ではまったく別のスコープであると予想します。 $familyという変数に無名関数を渡して、その中で$family()を再帰的に呼び出しています。 この無名関数は$familyという変数があることをまったく知りません。 スコープの外の存在は$contentsのように丁寧に教えてやらなければ見つけてくれないのです。 これが原因でした。

せいかい

$family = function ($children) use (&$family, &$contents) {
    if (count($children) == 0) {
        return;
    } else {
        foreach ($children as $child) {
            // 前処理
            $nextChildren = get_children(array(
                'post_parent' => $child->ID,
                'post_type' => 'page',
            ));
            $family($nextChildren);
            // 後処理
        }
    }
};

$family($firstChildren);

ちゃんと無名関数を渡す変数もuseでキャプチャしてあげましょう。 無名関数の中で自分を表すキーワード（クラスで言うthis）なんかが書ければ、 無名関数を渡される変数名が関数の定義の中の変数名に縛られないので、自由度が増すのですが… ありませんか？

Posted in PHP

【CSS】困ったときの「Can I use…」

Posted on by

こんにちわ。システム部のコタニです。

前職では、html/cssのコーディングをメインで行っていたため、
日々の業務ではなれない記述や黒い画面（ターミナルのことです）に
四苦八苦していますが、どうにか頑張っています。
ここでは覚えたことや、気をつけなければいけないことをまとめていければと思います。

さて、コーディングを行うにあたって、いっつも悩まされるIE（Internet Explorer）も
今年4月に最新版以外のサポートが切れ、喜んでいたのもつかの間、
案件によってはまだまだ対応されている方も多いかと思います。

そうなると、気になるのがブラウザごとのスタイルの対応状況。
できるだけ気をつけて制作はしていますが、なかなか全ての不具合をつぶし切れず、
一体なにが原因なのか、ググってもなかなかわからず、途方にくれてしまいそうな時、
ぼくは「Can I use…」を見るようにしています。

Can I use…

caniuse_01
https://caniuse.com/

古いブラウザのみではなく、モダンブラウザでも不具合が多発することがあります。
単純にベンダープレフィックの問題だったり、そもそも使えなかったりしますので、
いったん落ち着く意味も兼ねて、まずは確認です。

また、Sublime TextやAtomなどでパッケージが用意されているみたいなので、
ぜひ使ってみてはいかがでしょう？

（ぼくはこの記事を書いている時に初めて知りました。）

caniuse_02

※Atomでの見え方です。

Posted in CSS