お客様の声Customer Testimonials

IT企業の強みが伝わるサイトで採用力アップ

ベンチャー企業らしい先進的なデザインと、技術力が伝わるコンテンツ作りが秀逸でした。特に開発事例や技術ブログの構成は期待以上。リニューアル後、エンジニアの応募が3倍に増え、採用コストの削減にも繋がっています。

株式会社〇〇 代表取締役 中村様

社員の魅力が伝わるサイトで会社の雰囲気が一新

女性社員が多い当社の魅力を、スタッフインタビューや福利厚生の紹介で上手く表現していただきました。社員からも『会社の良さが伝わる』と好評です。求人応募も増え、特に女性エンジニアからの問い合わせが着実に増えています。

株式会社〇〇 代表取締役 吉田様

インスタ映えするカフェの世界観をサイトでも表現

写真の見せ方や色使いなど、カフェの雰囲気を完璧に表現していただき感動しました。予約システムの導入後は電話対応が減り、スタッフの負担も軽減。SNSとの連携で若い層の集客も好調で、休日は予約でほぼ満席になっています。

〇〇 Cafe オーナー 木村様

「お客様の声」ブロックについて

<!--▼▼▼▼▼ここから「お客様の声」-->
<section class="bg3 bg-pattern3" id="koe">

<h2 class="c">お客様の声<span>Customer Testimonials</span></h2>

<div class="list-normal1">

<div class="list up">
<figure><img src="images/photo1.jpg" alt=""></figure>
<div class="text">
<h4>IT企業の強みが伝わるサイトで採用力アップ</h4>
<p>ベンチャー企業らしい先進的なデザインと、技術力が伝わるコンテンツ作りが秀逸でした。特に開発事例や技術ブログの構成は期待以上。リニューアル後、エンジニアの応募が3倍に増え、採用コストの削減にも繋がっています。</p>
<p class="name">株式会社〇〇 代表取締役 中村様</p>
</div>
</div>

<div class="list up reverse">
<figure><img src="images/photo2.jpg" alt=""></figure>
<div class="text">
<h4>社員の魅力が伝わるサイトで会社の雰囲気が一新</h4>
<p>女性社員が多い当社の魅力を、スタッフインタビューや福利厚生の紹介で上手く表現していただきました。社員からも『会社の良さが伝わる』と好評です。求人応募も増え、特に女性エンジニアからの問い合わせが着実に増えています。</p>
<p class="name">株式会社〇〇 代表取締役 吉田様</p>
</div>
</div>

<div class="list up">
<figure><img src="images/photo3.jpg" alt=""></figure>
<div class="text">
<h4>インスタ映えするカフェの世界観をサイトでも表現</h4>
<p>写真の見せ方や色使いなど、カフェの雰囲気を完璧に表現していただき感動しました。予約システムの導入後は電話対応が減り、スタッフの負担も軽減。SNSとの連携で若い層の集客も好調で、休日は予約でほぼ満席になっています。</p>
<p class="name">〇〇 Cafe オーナー 木村様</p>
</div>
</div>

</div>
<!--/.list-normal1-->

<div class="r"><p class="btn1"><a href="#" class="inline-block">もっと見る</a></p></div>

</section>
<!--▲▲▲▲▲ここまで「お客様の声」-->

各ボックススタイルは

cssフォルダのstyle.cssから「list-normal1」でテキスト検索してみて下さい。詳しい解説もあります。

<section class="bg3 bg-pattern3" id="koe">について

「bg3」と「bg-pattern3」の2つのclassが指定されており、それぞれstyle.cssで検索すると設定内容がわかります。
「bg3」は背景色だけ指定されているスタイル。「bg-pattern3」は背景の格子柄のパターン(bg_pattern3.png)の読み込みです。

idはメニューのリンク先の目印です。
メニュー側は、
<a href="#koe">お客様の声</a>
になっています。
トップページ以外からトップページに戻るリンクだと、別ページへのリンクになるので
<a href="index.html#koe">お客様の声</a>
と書きます。

<div class="list up">について

「list」と「up」の2つのclassがついています。
本来はlistのみでOKですが、下からフェードしてくるupスタイルもつけています。
upがないと以下のように最初から表示された状態になります。upは汎用スタイルなので色々な所で使えます。

IT企業の強みが伝わるサイトで採用力アップ

ベンチャー企業らしい先進的なデザインと、技術力が伝わるコンテンツ作りが秀逸でした。特に開発事例や技術ブログの構成は期待以上。リニューアル後、エンジニアの応募が3倍に増え、採用コストの削減にも繋がっています。

株式会社〇〇 代表取締役 中村様

2つ目のボックスの<div class="list up reverse">について

通常は、<div class="list up">のみでいいのですが、画像とテキストブロックの左右を入れ替えたい場合にreverseを追加します。
お好みで入れ替えれられるようにclassで指定するようにしました。

社員の魅力が伝わるサイトで会社の雰囲気が一新

女性社員が多い当社の魅力を、スタッフインタビューや福利厚生の紹介で上手く表現していただきました。社員からも『会社の良さが伝わる』と好評です。求人応募も増え、特に女性エンジニアからの問い合わせが着実に増えています。

株式会社〇〇 代表取締役 吉田様

「もっと見る」ボタン

classのつけかたで色々なボタンになります。お好みで。
矢印アイコンはFont Awesomeを使用しています。詳しくはmanual.htmlをお読み下さい。

実際にアイコンを指定している箇所は、style.cssの、
.btn1 a::after {
の中にあるc「content」の行です。

もっと見る

もっと見る

もっと見る

もっと見る