ホームページ・ビルダー20 SP ファーストインプレッション

ホームページビルダー19から新搭載されたSP 本日発売開始のホームページビルダー20で改善強化されました。

私自身が19のSPで一番気にしていたのは、サイトタイプ=通常での出力されるHTMLがとても冗長なものになっていた点です。

ホームページビルダー20では解決していました。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>ホームページビルダー20SP | ホームページビルダー・バージョン19で新搭載されたSPが20で強化されました。</title><!–[if lt IE 9]>
<script src=”html5.js” type=”text/javascript”></script>
<![endif]–>
<link rel=”stylesheet” type=”text/css” href=”style.css”></head>
<body class=”basic2 home” id=”hpb-sp-20-0012-01″>
<div id=”page” class=”site”>
<header id=”masthead” class=”site-header sp-part-top sp-header2″ role=”banner”>
<div id=”masthead-inner” class=”sp-part-top sp-header-inner”>
<div id=”sp-site-branding2-1″ class=”sp-part-top sp-site-branding2″>
<h1 class=”site-title sp-part-top sp-site-title” id=””><a href=”index.html”>ホームページビルダー20SP</a></h1>
<h2 class=”site-description sp-part-top sp-catchphrase” id=””>ホームページビルダー・バージョン19で新搭載されたSPが20で強化されました。</h2>
<div class=”extra sp-part-top sp-site-branding-extra” id=”sp-site-branding-extra-1″>
<p class=”tel paragraph”>TEL.03-1234-0000</p>
<p class=”address paragraph”>〒163-0000 東京都○○区○○○1-2-3</p></div></div></div></header>
<div id=”main” class=”site-main sp-part-top sp-main”>
<div id=”contenthead” class=”sp-part-top sp-content-header”>
<nav id=”sp-site-navigation-1″ class=”navigation-main button-menu sp-part-top sp-site-navigation horizontal” role=”navigation”>
<h1 class=”menu-toggle”>メニュー</h1>
<div class=”screen-reader-text skip-link”><a title=”コンテンツへスキップ” href=”#content”>コンテンツへスキップ</a></div>
<ul id=”menu-mainnav”>
<li class=”menu-item current_page_item”><a href=”index.html”>トップページ</a>
<li class=”menu-item”><a href=”concept.html”>会社方針</a>
<li class=”menu-item”><a href=”company.html”>企業概要</a>
<li class=”menu-item”><a href=”service.html”>サービス/製品一覧</a>
<li class=”menu-item”><a href=”news.html”>新着情報・FAQ</a>
<li class=”menu-item”><a href=”recruit.html”>採用情報</a>
<li class=”menu-item”><a href=”contact.html”>お問い合わせ</a>
<li class=”menu-item”><a href=”access.html”>アクセス</a>
<li class=”menu-item”><a href=”blog.html”>ブログ</a></ul></nav>
<div id=”sp-block-container-1″ class=”sp-part-top sp-block-container”><a style=”display: block”><img id=”sp-image-1″ src=”img/header-main.png” class=”sp-part-top sp-image”></a></div></div>
<div id=”main-inner”>
<div id=”primary” class=”content-area”>
<div id=”content” class=”site-content sp-part-top sp-content page-toppage” role=”main”>
<header id=”sp-page-title-1″ class=”entry-header sp-part-top sp-page-title”>
<h1 class=”entry-title”>トップページ</h1></header>
<article>
<div id=”page-content” class=”sp-part-top sp-block-container”>
<p class=”large paragraph”>株式会社ビルダーストーリーは、○○○○○○○○を専門とする○○○○○○○○会社です。</p>
<h3 class=”paragraph”>トピックス</h3>
<ul id=”sp-list-1″ class=”sp-part-top sp-list”>
<li>「○○○○」は、○○○○○○○○のオリジナルブランドです。伝統的な技術をもとに、自由な発想で新製品を開発しました。新しいライフスタイルをご提案します。
<li>ここにTOPICSが入ります。ここにTOPICSが入ります。ここにTOPICSが入ります。ここにTOPICSが入ります。ここにTOPICSが入ります。ここにTOPICSが入ります。ここにTOPICSが入ります。ここにTOPICSが入ります。ここにTOPICSが入ります。</ul></div></article>
<div id=”sp-wp-post-list-1″ class=”hpb-viewtype-date hpb-posttype-news sp-part-top sp-wp-post-list”>
<h3><a href=”posts/news_archive.html”>ニュース</a></h3>
<dl>
<dt>2015年10月01日
<dd><a href=”posts/news1.html”>サイトをオープンしました。</a>
<dt>2015年10月02日
<dd><a href=”posts/news2.html”>○○○○○○○○を更新しました。</a>
<dt>2015年10月03日
<dd><a href=”posts/news3.html”>○○新聞に「○○○○○○」が掲載されました。</a></dl></div></div></div>
<div id=”sidebar1″ class=”sp-part-top sp-sidebar”>
<div id=”sp-wp-post-list-2″ class=”hpb-viewtype-title hpb-posttype-post sp-part-top sp-wp-post-list”>
<h3><a href=”posts/post_archive.html”>ブログ</a></h3>
<ul>
<li><a href=”posts/blog1.html”>ブログ始めました</a>
<li><a href=”posts/blog2.html”>○○○○○について</a></ul></div></div></div></div>
<footer id=”colophon” class=”site-footer sp-part-top sp-footer2″ role=”contentinfo”>
<div id=”colophon-inner” class=”sp-part-top sp-footer-inner”>
<nav id=”sp-site-navigation-2″ class=”navigation-main sp-part-top sp-site-navigation minimal” role=”navigation”>
<h1 class=”menu-toggle”>メニュー</h1>
<div class=”screen-reader-text skip-link”><a title=”コンテンツへスキップ” href=”#content”>コンテンツへスキップ</a></div>
<ul id=”menu-mainnav”>
<li class=”menu-item”><a href=”law.html”>特定商取引法に関する記述</a>
<li class=”menu-item”><a href=”privacy.html”>プライバシーポリシー</a></ul></nav>
<div id=”sp-block-container-2″ class=”sp-part-top sp-block-container”>
<p class=”copyright paragraph”>Copyright &copy; ○○○, All rights reserved.</p></div></div></footer></div><script type=”text/javascript” src=”navigation.js”></script></body></html>