製薬企業サイトの事例で解説！オウンドメディアの価値を高めるUIとCMS。
概要
コロナ禍になり、デジタルでユーザと結びつくオウンドメディアの重要性が一層高まっている中、デジタルマーケティングに取り組まれているご担当者も多いのではないでしょうか。
ただし、そもそもユーザにとって使いづらいサイトでは、データや知見の蓄積もされず、デジタルマーケティングの成果はなかなか得られません。
そこで、今回は「ユーザに使ってもらいやすいUI性能を実現するナビゲーション」、そして「スピーディーかつタイムリーな情報更新に適したCMSサービス」について、それぞれ製薬企業サイトを事例にご紹介いたします。
ぜひこの機会にご参加ください。
※今回のウェビナーでは、CTCのデジタルマーケティングへの各種取り組みご紹介に続けて、UI/UXとCMSのエキスパート2社に登壇いただき、各社個別の事例を題材にして、そのノウハウをお話しいただきます。
| セミナーサブタイトル | デジタルマーケティングに取り組むために。 |
| 開催日時 | 2021年2月26日（金）13:30-14:30 |
| セミナー詳細 | 1.イントロダクション（CTCのデジタルマーケティングへの取り組み）
（10分）
講演者：
伊藤忠テクノソリューションズ株式会社
エンタープライズ第１本部 サービスビジネス技術第３部
デジタルマーケティング開発第２課
エキスパートエンジニア 塩田 武臣
2.事例ご紹介（25分）
オウンドメディアに求められる体験価値を生み出すナビゲーションの実際
講演概要：
ユーザーがサイトに対して体験価値を評価する最大のポイントは「心地よさ」が伴う、直感的なわかりやすさや使いやすさです。
そのためには、サイト内での迷子状態を減らし、わかりやすいサイトを実現する「ナビゲーション性能」が、大変重要です。そこで、「何を見たいのか、どこに行きたいのか」というユーザーの心理に応えるテクニックを中外製薬様のサイトを例にご紹介します。
・ユーザーは今どこに居るのか、現在位置を知らせる
・どのページを「まだ見てないのか」「すでに見たのか」を瞬時に伝える
・「もっと知りたい」という気持ちに応える
講演者：
株式会社アリスマジック
執行役員 情報デザイン・ストラテジスト 香西 睦
3.ソリューションご紹介（15分）
【デモお見せします】HeartCore CMS の機能と構築事例について
講演概要:
HeartCore CMSは、サイト内検索やユーザ管理機能をはじめとして、
より柔軟で高度なコンテンツ管理を可能にする機能を備えた動的CMSです。
本パートでは、活用事例とともに、HeartCore CMSの機能をご紹介いたします。
講演者：
ハートコア株式会社
代表取締役社長／CEO 神野純孝 |
| 主催 | 伊藤忠テクノソリューションズ株式会社 |
| 注意事項 | ZoomによるWebセミナー（来場不要）
※参加方法は、お申込み後にご案内いたします。 |
| お問い合わせ先名 | 伊藤忠テクノソリューションズ株式会社
〒141-8522 東京都品川区大崎1-2-2 アートヴィレッジ大崎セントラルタワー
ライフサイエンス事業部 技術開発第2部 マーケティング課
ls-marcom@ctc-g.co.jp |
/* ===================================
基本設定
=================================== */
html { overflow-y:scroll; }
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
font-weight: normal;
font-style: normal;
}
li { list-style: none; }
/* ===================================
共通
=================================== */
/* フォント */
body {
font-family: Verdana, Roboto, 'Droid Sans', Meiryo, 'ＭＳ Ｐゴシック', 'Hiragino Kaku Gothic ProN', sans-serif;
}
select,input,button,textarea {
font-family: Verdana, Roboto, 'Droid Sans', Meiryo, 'ＭＳ Ｐゴシック', 'Hiragino Kaku Gothic ProN', sans-serif;
}
/* ===================================
画面全体のレイアウト
=================================== */
/* 画面全体の表示設定 */
body {
background:WhiteSmoke; /* 背景色 */
text-align:center; /* セミナーページエリアを中央に表示 */
}
/* セミナーページエリア全体の設定 */
div.container {
width:800px; /* 画面の横幅 */
background:white; /* 背景色 */
border:Gainsboro 2px solid; /* 外枠のラインの色と太さ */
font-size:14px; /* フォントの初期サイズ */
color:#333; /* フォントの初期カラー */
margin:0 auto; /* 画面の中央に表示 */
text-align:left; /* 左寄せ */
padding: 0px 80px;
}
/* セミナータイトルの設定 */
div.seminar_page_top h1 {
background:#000080; /* 背景色 */
margin: 15px 0px;
font-weight: bold;
color:white;
}
/* セミナー概要の設定 */
div.overview {
width:100%; /* 概要の横幅 */
float:left;
margin-right: 10px; /* 概要右側の余白 */
font-weight: bold;
}
div.overview p {
word-wrap: break-word; /* 横幅を超えた場合改行 */
}
/* ヘッダービジュアル全体の設定 （宮脇追加 20200511）*/
div.key_visual {
width:800px; /* メインビジュアルの横幅 */
}
/* セミナーメインビジュアル全体の設定 */
div.main_visual {
width: 40%; /* メインビジュアルの横幅 */
float: left;
}
/* セミナーメインビジュアルの設定 */
div.main_visual img{
width: 100%; /* ビジュアルの横幅(div.main_visualに対する%) */
margin: 0 auto; /* 中央に表示 */
display: block;
}
/* ===================================
開催概要エリアのレイアウト
=================================== */
/* 開催概要エリア全体の設定 */
div.wrapper {
width:800px; /* 画面の横幅 */
margin:0 auto; /* 中央に表示 */
background:white; /* 背景色 */
clear: both;
}
/* 開催概要の表 */
table.items {
width: 800px;
table-layout : fixed;
border:Gainsboro 1px solid; /* 表の外枠のラインの色と太さ */
border-collapse: collapse;
}
/* 開催概要の行 */
.items tr {
} /* 必要であれば行のデザインを設定することができます */
td {
border: 1px solid Gainsboro; /* 表の内枠のラインの色と太さ */
padding: 15px 30px;
}
td.content {
width: 70%;
}
.content p,a{
width: 100%;
word-wrap: break-word;
}
td.row {
width: 30%;
text-align: center;
}
/* セミナー講師画像の設定 */
.speaker_img {
float: left;
clear: both;
margin-top: 20px;
}
/* セミナー講師説明の設定 */
.speaker_text {
float: left;
margin-top: 20px;
padding: 10px;
}
/* ボタンの表示エリアの設定 */
div.button_area {
width:800px;
margin:10px auto 10px auto; /* 中央に表示、上下に10pxの余白 */
padding:10px 0 10px 0; /* ボタンとの上下の隙間のサイズ */
text-align:center; /* 中央にボタンを表示 */
clear: both;
}
/* 遷移用ボタン */
div.button_area a {
background: SteelBlue; /* 背景色 */
color: white; /* フォントの初期カラー */
font-size: 18px; /* フォントの初期サイズ */
font-weight: bold; /* フォントの太さ */
text-decoration: none; /* フォントの装飾 */
border: none;
padding: 5px 10px 5px 10px;
margin: 0px 10px 0px 10px;
}
/* 公開終了メッセージのデザイン */
div.finished-message {
background:MistyRose; /* 背景色 */
color:Crimson; /* フォントの初期カラー */
font-size:14px; /* フォントの初期サイズ */
font-weight:bold; /* フォントの太さ */
padding:5px 10px 5px 10px; /* メッセージテキストと背景色の隙間のサイズ */
margin:10px 13px 10px 13px; /* 上 右 下 左 の隙間のサイズ */
clear:both;
}
/* ===================================
スマートフォン表示用のレイアウト
=================================== */
/* スマートフォンとして認識する画面の横幅のサイズ */
@media screen and ( max-width:479px ) {
/* エリア全体の設定 */
div.container {
width: 100%;
padding: 5px;
}
/* 画面上部の画像 */
div.main_visual {
width: 100%;
float: left;
}
/* 設問エリア全体の設定 */
div.wrapper {
width:95%;
}
/* 設問の表 */
table.items {
width: 100%;
border: none;
}
td.content {
width: 80%;
}
td.row {
width: 80%;
}
/*設問名のセルのデザイン */
td {
float: left;
}
/* ボタンの表示エリアの設定 */
div.button_area {
width:95%;
}
}
