お役立ち情報

2017.12.25

新機能アップ 「レスポンシブ対応コンテンツパーツリリース」

平素は弊社CMSサービスをご利用いただきまして誠にありがとうございます。

2017年も残すところ僅かとなりましたが、この1年もRenewable リニューアブル をご愛顧いただき心より感謝申し上げます。

今年最後の新機能アップ

「レスポンシブ対応コンテンツパーツリリース」リリースのご案内です。
【バージョンアップ完了日】12月25日(金)
--------------------------------------------------------
【 アップデート情報 】コンテンツパーツ関連
レスポンシブデザインに対応したコンテンツパーツを追加
--------------------------------------------------------
レスポンシブデザインに対応したコンテンツパーツをなんと66種類リリースいたしました。
サイト編集の際に、今回リリースのコンテンツパーツをぜひご活用ください!
なお、ご利用に際しましては必要な設定など、注意事項がございます。
下記をご確認の上、ご対応いただきますようお願い申し上げます。
コンテンツパーツ
【見出し系(12個)】
2カラム 上ライン付き
3カラム 上ライン付き
画像と見出しとテキスト
画像と見出しとテキストの2セット
番号付き見出しの3セット
番号付き見出しの4セット
見出しとテキストの2セット
見出しとテキストの2セット
見出しとテキスト(太枠)
見出しとテキスト(太枠)2
見出しとテキスト(太枠)3
見出し(h2)日本語と英語
【画像系(27件)】
テキストと画像
テキストと画像3枚
テキストと画像6枚
ランキングの2セット
ランキングの3セット
ランキングの4セット
ランキングの5セット
吹き出し
吹き出し2
画像とテキストの5セット
画像とテキストの6セット
画像とテキスト背景(被せるパターン)
画像とテキスト背景(被せるパターン)2
画像とテキスト(スクロール付き)
画像とテキスト(上下中央揃い)背景付き
画像とテキスト(上下中央揃い)背景付き2
画像とテキスト(背景)の5セット
画像とテキスト(背景)の6セット
画像とリンクテキストの5セット
画像とリンクテキストの6セット
画像の下部にテキスト(複数行)
画像の中央にテキスト(1行)
画像組み合わせ
画像組み合わせ2
画像組み合わせ3
背景100%(テキストと画像)
背景100%(テキストと画像)2
【表組系(8個)】
営業時間用
営業時間用2
画像と表とテキスト
画像と表とテキスト2
画像と表とテキスト3
画像と表とテキスト4
見出しと表の2セット
見出しと表の3セット
【テキスト系(10個】
よくある質問(クリックで回答を表示)
チェックマーク
チェックマークの2セット
チェックマークの3セット
チェックマークの4セット
チェックマークの5セット
チェックマークの6セット
流れ(矢印なし)
流れ(矢印付き)
背景100%(テキスト)
【フリーエリア(4個)】
お問い合わせ
お問い合わせ2
お問い合わせ3
お問い合わせ4
【その他(5個)】
キービジュアル
キービジュアル2
キービジュアル3
キービジュアル4
キービジュアル5
※コンテンツパーツの追加・変更の際には、各種タブ内の既存のコンテンツパーツの混在して表示されます。
 見分け方としては、サムネイルに「レスポンシブ」と入っているコンテンツパーツが、
 レスポンシブデザイン対応になります。
サイトデザイン(テンプレート)について
新規リリースのコンテンツパーツにつきましては、レスポンシブデザインのresponsive_type01~06のみデザイン調整を行っております。
それ以外のテンプレートにつきましては、別途カスタマイズにてご対応いただく必要がございます。
type06以降リリースのレスポンシブデザインにつきましては、追って順次対応をさせていただく予定となっております。
非対応のテンプレートを対応させる場合(上級向け)
1. カスタマイズしたいテンプレートのHTMLファイルの<head></head>タグ内に、下記のソースを追加します。
 <link type="text/css" rel="stylesheet" href="CMS_SKIN_URL/contents_parts_2017.css" />
 <script type="text/javascript" src="CMS_SKIN_URL/js/contents.js"></script>
2. テンプレートのCSSファイルに必要なスタイルなどを追加して、デザインの調整を行います。
  ※ブラウザの開発モードなどを参考ツールとしてご利用ください。

2017.12.01

独自SSL証明書標準搭載に伴う共用SSLの提供終了のお知らせ

 平素は弊社CMSサービスをご利用いただきまして誠にありがとうございます。

弊社サービスでは、独自SSL証明書の標準搭載に伴い、SSLをご利用いただく際には、これまでの共用SSLとあわせて、独自SSLについてもご利用いただけるように対応してまいりました。
このたび、Webサイトの信頼度の向上と昨今のプライバシー保護重視の観点から、独自SSLに一本化し、【2017年12月20日】をもちまして共用SSLのサービス提供を終了させていただくこととなりました。

長年ご利用いただきました共用SSLではございますが、何卒ご理解を賜りますようお願い申し上げます。
なお、共用SSLの提供終了に伴いまして、下記をご確認いただきますようお願い申し上げます。

共用SSLの提供終了について  

◆提供終了日:2017年12月20日
◆提供終了日までの対応
提供終了日以降は「共用SSL」の設定をご利用いただくことができないため、共用SSLをご利用中のサイトにつきましては、2017年12月21日以降に弊社にて「独自SSL」の設定に自動切替されます。
ご不明な点や追記などがございましたら、 お気軽に[サポートフォーム]よりお問い合わせください。
※当サービスに関するお問い合わせ窓口につきましては、 緊急の場合を除き[サポートフォーム]に統一させていただいております。 
お電話やメールにて直接ご連絡をいただいた場合でも、 サポートフォーム]からの送信をお願いすることがございますので、 ご協力の程、何卒よろしくお願い申し上げます。

2017.09.19

Bootstrap3で簡単!画像を一工夫してこだわりのサイトに!

みなさまは、Bootstrap(ブートストラップ)というワードをご存知でしょうか?
Bootstrap(ブートストラップ)とは、Twitter社が開発したCSSの「フレームワーク」で、簡単にご説明するとHTML/CSSの知識がなくても、ちょっとした設定で様々なデザインが表現できるというものです。

弊社CMSも、このBootstrap(ブートストラップ)を使用することが可能です。

例えば下記のような画像の表示です。

このように画像を加工しなくとも、丸く表示させたり枠付きにして表示させることができます。

設定方法

表示方法を変えたい画像のページで[右クリック]→[フリーページ]→[フルエディタ編集]と進みます。

表示を変えたい画像パーツを[クリック]して選択し、上部ツールバーにある[イメージ挿入/編集]をクリックします。

[高度な設定]タブを開き、スタイルシートクラスが下記のようになっていることを確認します。

スタイルシートクラスに、下記の記述を入力し、[OK]と進みます。

記述例
  • img-rounded
  • img-circle
  • img-thumbnail

ここでは[img-circle]…画像丸を記述しています。

画像が丸くなりました!

それぞれの記述をすると、下の画像のように表示されます。
表示が変わったことを確認したら、[保存]を押してフルエディタ編集を終了します。

あとはいつものように[ダブルクリック]で写真を挿入すれば完成です!

Bootstrapを活用してみましょう

Bootstrapには、上記のような画像表示の他にも、ボタン・テーブル・ナビゲーション・アイコンなど様々なスタイルがあります。
一工夫でよりオリジナリティ溢れるサイトにしましょう!
Bootstrap3と検索すればスタイルが用意されていますので、ご興味のある方はお試しください。

2017.09.09

レスポンシブデザインを利用したテンプレートを設定しよう

前回は、Googleより発表されました、モバイルファーストインデックス(MFI)の導入についてお話いたしました。

その中でもご紹介しております「レスポンシブデザイン」(レスポンシブウェブデザイン/RWD)は、あらゆるデバイスに最適化したウェブサイトを単一のHTMLで実現できるため、GoogleのMFIの導入にかかわらず、デバイスにとらわれない情報提供を行うことができます。

今回は、弊社CMSでご提供しておりますレスポンシブデザインのテンプレートを設定する手順と、弊社CMSでのレスポンシブデザイン利用の際の注意点をご紹介させていただきます。

事前に確認しましょう

2017年1月以前にご契約いただいた方は、PCサイトとモバイルサイトが生成されていますので、まずは下記の手順にて設定を行ってください。

まず、ログイン後コントロールパネルから[システム]→[サイト設定]と進みます。

次に、モバイルURLの項目を、全て/(PCサイト)にチェックを入れてください。

これにより、スマートフォン専用サイトを表示しない設定になりますので、レスポンシブデザインのテンプレートが設定可能となります。

※2017年1月以降にご契約いただいた方は、既にこの設定が適応されています。
※この設定により、モバイルのブロックレイアウト機能は今後設定不要になります。

ここからデザインテンプレートを変更します

コントロールパネルより、[管理]→[サイトデザイン]と進みます。

次に、右上[インストール]を押します。

左上二番目[レスポンシブ]のタブをクリックすると、現在ご提供しているレスポンシブデザインのテンプレート一覧が表示されます。※テーマカラーから探すことも可能です

設定したいお好きなデザインテンプレートを選び、インストールをクリックしてください。
(ここでは responsive_type03_red のテンプレートを選びます)

インストールが完了すると、インストール済みデザインの中にテンプレートが登録されますので、チェックボックスにチェックを入れて[OK]を押します。

デザインテンプレートが変更されました!

ご注意

この操作は、右クリックの[元に戻す]操作は適応されませんので、戻したい場合は必ず[サイトデザイン]の中のチェックボックスにて変更を行ってください。

また、状況に応じて、レイアウトの調整を行ってください。
コントロールパネルの[作成]→[ブロックレイアウト]と進みます。

各パーツを表示させたい場所に[ドラッグ&ドロップ]で移動し、[OK]を押して表示をご確認ください。
(ここでは、メニューがページ下部にあったため、ヘッダー部分に表示させる設定をしています。)

メニューが上部に表示されました!

レスポンシブデザインへの変更依頼も承ります

レスポンシブデザインテンプレートへの変更、最適な表示までお手直しさせていただきます。
お気軽にお問い合わせください。

お問い合わせはこちら

2017.07.03

新機能アップのお知らせ

『連携機能で簡単!素材サイトの素材画像を使ってみよう』

いろいろなWebサイトを拝見すると、画像を上手に使用されているWebサイトは、非常に見やすいことに気付かされます。反対に、文章が多くて画像がほとんどないWebサイトは分かりづらく、「他に分かりやすいサイトはないかな?」と、そのWebサイトから離脱してしまうことがあります。
Webサイトのテーマを印象づける画像、文章の内容を直感的に伝えるための画像など、利用目的によって使用する画像が異なるため、Web制作の際にも画像選定に時間を要することが多いのではないでしょうか。

弊社CMSでは、そんなときに役立つ無料素材サイトとの連携機能をリリースしました。
簡単な手順でダウンロードしていただけますので、ぜひウェブサイトの制作の際にお役立てください。

素材サイトとの連携機能について

既存機能「サーバーブラウザ」に、高クオリティなCC0ライセンスの写真を配布している無料の素材サイトから、直接サーバーブラウザに写真素材をダウンロードすることができる機能が搭載されました。

現在対応しているサイト

pixabay Unsplash
ライセンス CC0 CC0
検索 日本語でのキーワード検索や新着順、人気順での並び替えに対応しています。 カテゴリーごとに細かく分類されています。キーワード検索は英語に変換して検索されます。
公式サイト https://pixabay.com/ https://unsplash.com/

※写真素材や使用に関する権利などの不明点につきましては、直接各サイトをご確認ください。

ダウンロード手順

  1. サーバーブラウザから連携するサイトロゴをクリックします。

      
  2. 写真素材の一覧からダウンロードしたい写真を選択してクリックします。
    Unsplashのキーワード検索は英語に変換して検索されます。
    例)キーワード「キッチン」と入力すると「kitchen」に変換され、キーワードに一致する写真を検索することができます。

      
  3. 画像を選択して、ダウンロードします。

       
  4. サーバーブラウザに戻ります。

       
  5. ダウンロードした画像は、サーバーブラウザの各フォルダに保存されます。
  6. pixabay Unsplash
    保存フォルダ名 「pixabay」 「Unsplash」
    ディレクトリ /images/pixabay/ /images/usplash/

参考:ダウンロードした画像をメイン画像に設定

上記の手順でダウンロードした画像を、業種別サイト初期データ「建築系サイト(レスポンシブ)」のメイン画像に挿入しました。
操作方法は、通常の画像挿入と同様、画像をダブルクリックして、サーバーブラウザから上記手順でダウンロードした画像に変更しております。

  • 変更前
  • 変更後
    キッチンをイメージする印象の画像に変更
    (強みとする分野の印象づけをすることができる)

画像の著作権

画像などの著作物の著作権は著作者(作った人)にあります。
対象の画像を使用してよいか、また商用利用ができるか、画像の改変をすることができるかなど、画像などの著作物に対する権利はそれぞれ異なってまいります。
Webサイトに画像等の著作物を利用する際には、取得元の利用規約などを確認の上、許可される権利の範囲で利用されるようにご注意ください。

2017.01.12

Googleモバイルファーストインデックス(MFI)に向けて

日常生活の中で、パソコンを利用することがめっきり減っておりますが、みなさまはいかがでしょうか?
1日のタイムラインを振り返ると、仕事の連絡や情報確認、通勤途中のSNS利用や情報収集、プライベートの連絡など、スマートフォンやタブレットなどのモバイル端末を利用する時間が非常に多いことがわかります。
そして、利用端末は「パソコン」から「モバイル」へとシフトしており、モバイルが重視されていることを実感することができます。
Googleは、ユーザーのニーズに合わせてパソコン重視からモバイル重視へと移行しており、2015年4月に導入されたモバイルフレンドリーへの対応から1年半、ついに2016年11月4日にはGoogleからモバイルファーストインデックス(MFI)の導入について正式に発表されました。
正式な移行時期は明示されていませんが、今後数カ月にわたって小規模の実験を行って反映されるとのことです。

公式発表につきましては、下記をご確認ください。

モバイルファーストインデックスに向けて

Googleが目指すサービスとは?

Googleが目指すサービスとは?Googleが目指すサービスについて、公式発表の下記の箇所にヒントがあります。

Of course, while our index will be built from mobile documents, we're going to continue to build a great search experience for all users, whether they come from mobile or desktop devices.

Googleのサービスは、デバイスにとらわれずにユーザーにとって価値のある検索結果が得られるサービスの提供であり、モバイルであっても、パソコンとの検索結果に差異があってはならないということが重要と考えられます。

モバイルファーストの背景

モバイルファーストが重要視される背景としては、みなさまも実感いただいているように、スマートフォンやタブレットなどのモバイル端末の普及に伴うインターネットの利用端末の変化があります。この変化への対応のひとつとして、Googleでは「モバイルフレンドリー」への対応を推奨してきました。

モバイルファーストインデックスに向けた問題点

モバイルファーストインデックスに向かう上で、Googleのランキングシステムの現状と問題点は次のように揚げらており、この問題点の解決が必要であり、WEBサイトに対してGoogleから解決するよう求められています。
PC向けには設定されたキーワードに対する充実したコンテンツを掲載し、モバイル向けには省略したコンテンツを掲載しているWEBサイトは、検索したモバイル利用者にとって必要な情報が得られない状況となる可能性があるため、このような問題を解決する必要があります。

ランキングシステムの現状

デスクトップ版(PC向け)のコンテンツを主(メイン)に用いてユーザーとの関連性を評価

MFI適用後のランキングシステム

モバイル向けのコンテンツを主(メイン)に用いてユーザーとの関連性を評価

MFI適用後に考えられる問題点

モバイル版のページのコンテンツがデスクトップ版のコンテンツよりも少ないケースにおいて問題が発生

モバイルファーストインデックスへの対応(問題点への対応)

●レスポンシブデザイン

モバイルファーストインデックスへの対応は特に必要はありません。

●モバイルサイトあり

  1. PCと同URL・主要なコンテンツやマークアップが同一の場合…モバイルファーストインデックスへの対応は特に必要はありません。
  2. PC と別URL・主要なコンテンツやマークアップが同一の場…モバイルファーストインデックスへの対応は特に必要はありません。
  3. PC と別URL・主要なコンテンツやマークアップが異なる場合…モバイル向けがPC向けより情報が少ない場合やコンテンツの質が劣る場合には、評価が下がる可能性があります。この場合には、モバイル向けのコンテンツの見直しをご検討ください。

なお、詳細につきましては公式情報サイトをご確認ください。

モバイルファーストインデックスに向けて(公式情報)

●モバイルサイトなし

PC向けのみでもGoogleはインデックスしてくれるようですが、ランキング上昇は期待できないようです。モバイル向けのサイト制作をご検討ください。
なお、モバイルファーストインデックスはGoogleのテスト段階ということもあり、今後導入に向けて情報公開がされると思われますので、今後の公式情報をご確認いただきますようお願いいたします。

2016.09.01

モバイルフレンドリーを再確認!モバイル対応の重要性

インターネットを利用する際には、どんな端末を利用されていますか?

数年前であれば、パソコンが中心となっていたインターネットの利用も、スマートフォンやタブレットなどのモバイル端末の普及に伴い、ここ数年はパソコンからモバイル端末へと移行されてきました。

インターネット利用において、多くのウェブサイトに大きな影響を与えるのが、検索エンジンの検索順位ではないでしょうか。検索エンジンにとっては、検索をしてくれる利用者がターゲットユーザーになります。モバイル端末の普及は、モバイル端末を利用するターゲットユーザーを重視する必要がある、ということを意味します。

データに見るモバイル対応の重要性と、Googleが導入したモバイルフレンドリーについてお話を進めてまいります。

データに見るモバイル対応の重要性

総務省発表された、平成28年版情報通信白書では、2015年末現在のインターネットの利用状況を見ることができます。インターネットを利用する端末は、パソコンからスマートフォン・タブレット主流に変化してきました。

詳しいデータは、下記の「インターネットの利用動向」をご覧ください。

インターネットの利用動向

情報通信端末の世帯保有率の推移

2015年末の情報通信機器の普及状況を見ると、「パソコン」の世帯普及率は、前年(2014年)の78.0%から76.8%に減少しているにも関わらず、「スマートフォン」は64.2%から72.0%、「タブレット」は26.3%から33.3%へ増加していることが分かります。

情報通信端末の世帯保有率の推移

2015年末の情報通信機器の普及状況を見ると、「パソコン」の世帯普及率は、前年(2014年)の78.0%から76.8%に減少しているにも関わらず、「スマートフォン」は64.2%から72.0%、「タブレット」は26.3%から33.3%へ増加していることが分かります。

[出典] 総務省「ICTサービスの利用動向」([左]図表5-2-1-1、[右]図表5-2-1-3を加工し作成)
//www.soumu.go.jp/johotsusintokei/whitepaper/ja/h28/pdf/n5200000.pdf 

Google モバイルフレンドリーのポイント

Googleのモバイルフレンドリー導入とアップデートについて

インターネット利用におけるモバイル端末の重要性は、検索エンジンも同様であり、2015年4月にはGoogleがモバイルでの検索結果の査定基準として、モバイルフレンドリーが導入されました。
また、2016年5月には、モバイルフレンドリーアルゴリズムがアップデートされ、モバイル端末での操作性およびコンテンツの品質が重視されていることがうかがえます。

モバイルフレンドリーのポイントについては、下記の原文箇所に記載されています。
ウェブサイトが端末の種類に依存せず、どの端末からも最良の検索結果が得られることが重要であることがわかります。

Getting good, relevant answers when you search shouldn’t depend on what device you’re using.
You should get the best answer possible, whether you’re on a phone, desktop or tablet.

【要訳】
良い検索結果を得ることは、使用する端末の種類に依存されるべきではない。
携帯電話、デスクトップ、タブレットなどの端末から検索しても、最良の検索結果が得られるべきである。

また、このアップデートのポイントについては、下記の原文箇所に記載されている通りです。

If you've already made your site mobile-friendly, you will not be impacted by this update. 
-(省略)-
And remember, the intent of the search query is still a very strong signal ? so even if a page with high quality content is not mobile-friendly, it could still rank well if it has great, relevant content.

【要訳】
既にモバイルフレンドリーに対応したウェブサイトが影響されることはない。
高い品質のコンテンツを含むページがモバイルフレンドリーに対応していない場合でも、関連性の高いコンテンツであればより良くランク付けされる可能性がある。

モバイルフレンドリーのガイダンス提供

モバイルフレンドリーへの対応については、Googleよりガイダンスが提供されておりますので、ご活用ください。

【モバイルフレンドリーガイダンス】
モバイルフレンドリーのガイダンスはこちら(外部リンク)

モバイルフレンドリーチェック

Googleは、モバイルフレンドリーに対応しているかどうかチェックツールを用意しています。チェックしたいウェブサイトのURLを入力して、ご確認ください。
モバイルフレンドリーテスト(外部リンク)

モバイル対応の方法について

パソコン用サイトのみ運用されているサイトをモバイル対応する方法として、下記の3つの方法があります。
モバイルへの対応がこれから、というウェブサイトにつきましては、対応可能な方法をご検討ください。
また、既にモバイル対応済みの場合は、上記の「モバイルフレンドリーチェック」を行って、モバイルフレンドリーに対応しているかどうか、確認されることをおすすめします。

  • モバイルサイト(PC と別URL)
    パソコン用のサイトとは別のURLでモバイルサイトを構築する方法です。弊社CMSでは、この方法を採用しております。
    ユーザーエージェントで利用端末を判別し、あらかじめ準備されたパソコン用ページやモバイルページ(別URL)を表示します。
  • モバイルサイト(PCと同じURL)
    パソコン用のサイトと同じURLでモバイルサイトを構築する方法です。
    ユーザーエージェントで利用端末を判別し、あらかじめ準備されたパソコン用ページやモバイルページ(同じURL)を表示します。※弊社CMSでは対応しておりません。
  • レスポンシブウェブデザイン
    ブラウザの横幅のサイズを判断基準に、CSS(スタイルシート)によって表示が切り替わるように構築する方法です。1つのHTMLで管理されるため、1URL1コンテンツのサイトを実現することができます。
    弊社CMSでは、テンプレートのカスタマイズによりレスポンシブウェブデザインに対応いただくことができます。

リニューアブルに関するお問い合わせ

Tel.046-240-6973

営業時間 10:00 - 17:00 定休日:土・日