2023-04-21

コーポレートサイトの作成

web制作 WordPress

今回はWordpressを使ってコーポレートサイトを作ってみます。

会社概要

会社名：CG-BIM Studio
タグライン：建築の可能性を広げるCGパース
事業概要：建築CGパース制作会社（B to B）
建築CGパース制作会社は、建築物や不動産物件の外観や内観をCG技術を使用して表現する専門的な会社です。建築家や不動産開発業者、建設会社などからの依頼を受けて、建物や空間のイメージをリアルなCGパースにして提供します。

主な事業内容

外観CGパース：建物の外観をCG技術を使用してリアルに再現し、建物の外見や材質、環境などを視覚的に表現します。建物のデザインや色彩、光の表現などを調整して、建築物の魅力を引き出します。

内観CGパース：建物の内部空間をCG技術を使用して表現し、部屋のレイアウトや家具、照明、素材などを再現します。クライアントの要望に応じた内装デザインをビジュアル化し、イメージの共有やプレゼンテーションに活用されます。

BIMを使ったCGモデリング作成：BIMを活用することで、3Dモデリングによる空間情報だけでなく、時間情報や費用情報などの情報も統合的に扱い、建築プロジェクト全体を最適化することができます。

VR・ARコンテンツ：建物や空間のVR（仮想現実）やAR（拡張現実）コンテンツを制作します。クライアントや顧客が建物や空間を仮想的に体験し、リアルなイメージを得ることができます。

コンセプト

"ビジョンを形にする。建築CGパースで、新たな未来を描こう。"
BIMを活用し、建築の未来をデジタルモデルで描き出します。高品質なCGパースを通じて、リアルな建築イメージを再現し、設計変更の迅速な反映や効率化されたプロジェクト管理を実現します。豊富なBIM技術を駆使し、クリエイティブな視点で建築デザインを最適化し、顧客満足度を高めます。卓越したCGパース制作により、お客様のビジョンを実現するために、最先端のBIM技術を駆使し、革新的な建築CGパースを提供します。

ページ構成

トップページ
サービスページ
実績詳細ページ
採用情報ページ（固定ページ）
お問い合わせページ（入力、確認、完了ページの作成。自動返信機能の追加）
プライバシーポリシーページ（固定ページ）

トップページの内容

メインビジュアル
お知らせ（2〜3件）→お知らせ一覧ページへ
コンセプト
事業内容
works（2〜3個）→サービス詳細ページのworks一覧へ
会社について
採用情報概要　→採用情報ページへ
お申し込み
お問い合わせ・資料請求
CTA

サービスページ

制作の流れ
クライアントの声（カスタムフィールド）
よくある質問

実績詳細ページ

works一覧

制作のポイント

to B を意識したサイト（動線を明確に）
Gridレイアウトと斜め線を取り入れたデザイン
グラデーションを効果的に使用
コンテンツの更新方法によって異なるWordpressの機能を使用する（新しいコンテンツをどんどん増やしていく場合は投稿、コンテンツのテキスト内容を定期的に更新したい場合はカスタムフィールド、近い将来もしかしたらコンテンツの一部分を変更したい場合は固定ページ化）

参考サイト
www.accorder.co.jp

koyobase.com

www.nomurakougei.co.jp

www.yuridenki.co.jp

2023-04-20

cssのmotion-pathを使ってパスアニメーションを作ってみる

アニメーション

cssのmotion-pathを使う事でオブジェクトを自身で作成したパスに沿って動かす事が出来ます。

まずはイラストレーターでモーション用のパスをペンツール等で作成します。ここで作成したパスに沿って要素を動かす事が出来ます。

次にcssで作成したモーション用のsvgファイルのpathデータを使ってアニメーションにします。
「d=""」の中身を取って、cssのoffset-path:path("")の中に入れる。

<path class="st0" d="M0.5,180C14.6,68.8,111.3-6.6,206.5,4c82.3,9.2,153.9,81.8,158,166c3.8,77.5-49.2,168.1-119,171
	c-65.5,2.7-128.7-72.6-130-137C113.2,85.2,321-36.4,433.5,11c83.4,35.1,68.2,143.6,152,184c84.4,40.7,201.5-20.4,301-93"/>

css

.offsetElement{
width: 400px;
text-align: center;
offset-path:path("M0.5,180C14.6,68.8,111.3-6.6,206.5,4c82.3,9.2,153.9,81.8,158,166c3.8,77.5-49.2,168.1-119,171c-65.5,2.7-128.7-72.6-130-137C113.2,85.2,321-36.4,433.5,11c83.4,35.1,68.2,143.6,152,184c84.4,40.7,201.5-20.4,301-93"); 
motion-offset: 100%;
offset-distance: 0;
animation: move 3s ease-in-out infinite alternate;/* alternateは逆再生 */
}

/*move のキーフレーム*/
@keyframes move {
0% {offset-distance:0}
100% {offset-distance: 100%; }
}

2023-04-20

svgで手書き風文字のアニメーション

Illustrator アニメーション

1.IllustratorでSVG画像を作成

まずはIllustratorでアニメーションで動かしたい文字を書きます。この時、なるべく細い筆記体のフォントを選ぶと良いでしょう。レイヤー名はtextにしましょう。文字を書いたらアウトラインにし、レイヤーをロックしましょう。

次に、新しいレイヤー（mask）を作り、そこに下のレイヤーの文字が隠れるように線を描きます。

この時にアニメーションで動かしたい順番に線を引くようにしましょう。文字を綺麗に隠せたらSVGで保存します。

2.htmlとcssでアニメーションの作成

svgファイルの下の方に出来ているmaskレイヤー部分を「mask」タグで囲みます。

<mask id="mask-wrapper">
<g id="mask">


</g>
</svg>
</mask>

最後にcssでmaskレイヤーのpathをアニメーションで動かします。この時文字レイヤーに対してmaskの処理をします。

#mask path{
fill:none;
stroke:#ffffff;
stroke-width:7;
stroke-dasharray: 1800px;
stroke-dashoffset: 1800px;
animation: line 3s 0.4s forwards;
}
@keyframes line{
0%{stroke-dashoffset: 1800px;}
100%{stroke-dashoffset: 0;}
}


#text{
mask: url(#mask-wrapper);
stroke: #000;
}

さらにhtml内にインラインで入っているsvgコードを外部ファイルに戻してloadメソッドで呼び出します。
とりあえず簡単なloadで呼び出しましょう。

$('#logo').load('txt.svg');

ajaxを使う場合は

$.ajax({
url: 'txt.svg',//ここにsvgファイルのパスを入れる
type: 'GET'//データ通信方法
})
.then(
// 1つめは通信成功時の処理
function(data){
	var svg = $(data).find('svg');
  $('#logo').append(svg);
},
// 2つめは通信失敗時の処理
function(){
	alert('読み込み失敗');
})

2023-04-18

4月18日の作業データ（CG-BIM Studio）

index,html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CG-BIM Studio</title>
<link rel="stylesheet" href="css/common.css">
</head>
<body>
<header>
<h1><a href="#">CG-BIM Studio</a></h1>
<nav id="g-nav">
<ul>
<li><a href="#">私たちについて</a>
<div class="drop-menu">
<div class="drop-inner">
<p><a href="#">
<img src="https://placehold.jp/100x80.png" alt="" width="100" height="80">
お知らせ</a></p>
<p><a href="#">
<img src="https://placehold.jp/100x80.png" alt="" width="100" height="80">
コンセプト</a></p>
<p><a href="#">
<img src="https://placehold.jp/100x80.png" alt="" width="100" height="80">
事業内容</a></p>
<p><a href="#">
<img src="https://placehold.jp/100x80.png" alt="" width="100" height="80">
会社について</a></p>
</div><!-- /.drop-inner -->
</div><!-- /.drop-menu -->
</li>

<li><a href="#">サービスについて</a>
<div class="drop-menu">
<div class="drop-inner">
<p><a href="#">
<img src="https://placehold.jp/100x80.png" alt="" width="100" height="80">
制作の流れ</a></p>
<p><a href="#">
<img src="https://placehold.jp/100x80.png" alt="" width="100" height="80">
利用者の声</a></p>
<p><a href="#">
<img src="https://placehold.jp/100x80.png" alt="" width="100" height="80">
よくある質問</a></p>
</div><!-- /.drop-inner -->
</div><!-- /.drop-menu -->
</li>

<li><a href="#">実績紹介</a></li>
<li><a href="#">採用情報</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>


<button id="ham-btn" type="button"><span></span></button>
<nav id="g-nav-sp">
<ul>
<li><a href="#">私たちについて</a>
<div class="drop-menu">
<p><a href="#">お知らせ</a></p>
<p><a href="#">コンセプト</a></p>
<p><a href="#">事業内容</a></p>
<p><a href="#">会社について</a></p>
</div><!-- /.drop-menu -->
</li>

<li><a href="#">サービスについて</a>
<div class="drop-menu">
<p><a href="#">制作の流れ</a></p>
<p><a href="#">利用者の声</a></p>
<p><a href="#">よくある質問</a></p>
</div><!-- /.drop-menu -->
</li>

<li><a href="#">実績紹介</a></li>
<li><a href="#">採用情報</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</header>




<main>
<div class="main-visual">
<img src="img/top-main-01.webp" alt="" width="1920" height="960">
</div>


<section id="news">
<h2 data-en="News">ニュース</h2>
<div class="news-wrapper">
<div class="news-box">
<a href="#">
<h3>記事タイトル</h3>
<p class="post-img"><img src="https://placehold.jp/800x420.png" alt="" width="800" height="420"></p>
<p class="post-date">2023.04.18</p>
</a>
</div><!-- /.news-box -->

<div class="news-box">
<a href="#">
<h3>記事タイトル</h3>
<p class="post-img"><img src="https://placehold.jp/800x420.png" alt="" width="800" height="420"></p>
<p class="post-date">2023.04.17</p>
</a>
</div><!-- /.news-box -->

<div class="news-box">
<a href="#">
<h3>記事タイトル</h3>
<p class="post-img"><img src="https://placehold.jp/800x420.png" alt="" width="800" height="420"></p>
<p class="post-date">2023.04.16</p>
</a>
</div><!-- /.news-box -->

<div class="news-box">
  <a href="#">
  <h3>記事タイトル</h3>
  <p class="post-img"><img src="https://placehold.jp/800x420.png" alt="" width="800" height="420"></p>
  <p class="post-date">2023.04.15</p>
</a>
</div><!-- /.news-box -->
</div><!-- /.news-wrapper -->

</section><!-- /#news -->

<section id="concept">
<h2 data-en="Concept">コンセプト</h2>
</section><!-- /#news -->

<section id="service">
<h2 data-en="Service">サービス</h2>
</section><!-- /#service -->

<section id="works">
<h2 data-en="Works">実績紹介</h2>
</section><!-- /#works -->

<section id="about">
<h2 data-en="About">会社について</h2>
</section><!-- /#about -->
</main>

<footer></footer>
</body>
</html>

style.scss

@use "reset";

@import url('https://fonts.googleapis.com/css2?family=Kanit&family=RocknRoll+One&display=swap');

//変数の登録
$font_en: 'Kanit', sans-serif;
$font_ja:'RocknRoll One', sans-serif;

//レイアウトシフト用
img{
object-fit: cover;
width: 100%;
height: 100%;
}

//sp用のナビ
#g-nav-sp{
display: none;
}
body{
height: 2000px;
}


//header部分
header{
width: 96%;
height: 70px;
background-color: #ffffffaa;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
position: fixed;
top: 20px;
left: 0;
right: 0;
margin: auto;
z-index: 10;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 0 8px #717171;
}

h1{
width: 25%;
padding-left: 20px;
a{
color: #222;
}
}

#g-nav{
width: 75%;
ul{
display: flex;
justify-content: right;
position: relative;
li{
margin: 0 14px;
a{
color: #222;
padding: 20px 14px;
&:hover{
text-decoration: underline 2px;
text-underline-offset: 2px;
}
}
}
}
}


.drop-menu{
position: absolute;
left: 0;
top: 40px;
width: 100%;
opacity: 0;
visibility: hidden;
transition: 0.4s;
.drop-inner{
display: flex;
align-items: center;
background-color: #ffffff;
border-radius: 10px;
height: 160px;
margin-top: 20px;
}
p{
margin: 0 40px;
}
img{
display: block;
margin-bottom: 6px;
}
}

#g-nav li:hover>.drop-menu{
opacity: 1;
visibility: visible;
}





//main-visual部分
.main-visual{
width: 100%;
height: 100vh;
margin-bottom: 200px;
}
.main-visual>img{
object-fit: cover;
width: 100%;
height: 100%;
}


//お知らせ部分
.news-wrapper{
max-width: 1200px;
margin: 50px auto;
display: flex;
gap: 40px;
.news-box{
a{
display: flex;
flex-direction: column;
color: #222;
h3{
order: 2;
margin: 10px 0 6px;
}
.post-img{
order: 1;
}
.post-date{
order: 3;
text-align: right;
}
}
}
}

2023-04-17

フリー素材集

2023年モダンCSSの最新トレンド

CSS応用

speakerdeck.com

2023-04-17

ランディンページの動線を考える

webサイト制作 webデザイン

ランディングページ（Landing Page）とは本来、訪問者が最初に着地する（land）ページという意味合いでサイトのトップページの事をLPと呼んでいましたが、今ではLPというと「訪問者のアクションを誘導することに特化した縦長のレイアウトのページ」のことを指します。
LPでもっとも大事なのはいかに訪問者に目標となるアクションを行わせるか、です。

コンバージョン

コンバージョンとは、変換を意味する言葉です。Web マーケティングの分野に置いては、「顧客見込み」から「顧客」への変換を意味し、成約を意味する言葉で最終的な成果として使われます。主に購入・資料請求・お問い合わせ・会員登録などをコンバージョンにする場合が多いです。コンバージョンを設定することで、Webにおける施策の効果測定が出来るようになります。
コンバージョンが起きた割合のことをコンバージョン率（ CVR）といいます。コンバージョン率は、コンバージョン数÷ 訪問数で算出することが出来ます。

ゴールの設定

ターゲットとなるユーザーにとってほしい行動を明確にします。商品購入をしてほしいのか、会員登録をしてほしいのか、お問い合わせをしてほしいのかなどです。場合によってはペルソナと呼ばれる、具体的なユーザーの人物像を想定し、その人物に向けて訴求力の高いLPを作る必要があります。

ストーリー性

「顧客見込み」から「顧客」へ変える為にはユーザーにストーリー性を持ったページを作り、ページ内でしっかりと説明をすることが大事です。

AIDAの法則

Attention：注意

まず、ユーザーの注意を引きます。問題解決をしたいユーザーに、なにそれ！と思わせることが重要です。

Interest：興味

興味を持ってくれそうな内容を書きます。詳細な説明を書いていきます。4つのポイント・3つの理由など、数を提示する事もあります。

箇条書きのデザイン

www.pinterest.jp

Desire：欲求

ユーザーにとってのメリットや競合との差別化要因を伝えます。問題の解決ができる理由を具体的に示すことが有効です。

Action：行動

ユーザーが迷いなく申し込みや購買などのアクションをとれるよう、最後のひと押しをします。なぜ「今」「ここ」で買うのがいいのかを強調します。「期間限定」や「数量限定」などの文言がよく使われます。

CTA

CTAとは、Call To Action(コールトゥアクション)の略で、「行動喚起」と訳される。 Webサイトの訪問者を具体的な行動に誘導すること。

rdlp.jp

lp-web.com

business.adobe.com

★ゆめの訓練校復習日記★