タグ別アーカイブ: レスポンシブウェブデザイン

ホームページ作製支援ソフト BiND for WEB LIFE 8 って凄いかも? SSL対応フォーム無料やレスポンシブウェブデザインに対応らしい

こんにちは。nekonomoridesignのyoshyです。
今朝、ヤフーニュースをチェックしていたら、こんな記事を発見。

ウェブ制作ソフト「BiND for WebLiFE 8」9月発売、レスポンシブウェブに対応、SSL対応フォーム無料提供も

http://headlines.yahoo.co.jp/hl?a=20150819-00000012-impress-sci

記事を読むまでこのソフトの存在は知りませんでしたが、いよいよレスポンシブウェブにも対応するようなハイスペックなホームページ作成支援ソフトが出てきました。

記事によると、このソフトは

  • HTMLの知識必要なし
  • CSSの知識必要なし
  • ブロック単位で表示非表示を設定
  • 20種、62カラーのバリエーションテンプレート
  • 20種のCSSテンプレート
  • 任意テンプレート使用可能は
  • カスタマイズ可能なSSL対応フォーム無料提供

など、一通りの事が全てできるとのこと。

それらがついて、1万9800円〜という低価格。

BiND公式サイトへ

昔、ウェブページ作成ソフト(ホームページ作成ソフト)といえばdream weaverが主流でしたが、これからはこのBinDが主流になってくるのかもしれませんね。

今やGoogle検索対象には、レスポンシブウェブデザインに対応しているかも重要

以前にも書きましたが、今や、スマホでwebページを見るのは当たり前な時代となりました。それに伴い、Googleの検索対象の項目として、ページがレスポンシブウェブに対応しているかも評価基準のひとつとなっています。

ですので、このBiNDがリリースされたのは大チャンス!今迄……そんなレスポンシブウェブデザインとかわけわからないのは別に……と思っていた企業のweb担当さん、広報さんは、是非この機会にこのソフトを使ってレスポンシブウェブに対応したホームページに刷新するべきだと思います。

ウェブデザイナー、プログラマーは更に専門性を求められる時代に突入か

逆にこのBiNDが流行り、操作性もたやすく、ちょっとパソコンが得意な人が使えるくらいの使い勝手が良いものだった場合、プログラマーやウェブデザイナーは仕事が減る可能性は少なくありません

クライアントによっては、見栄えがよければ何でも良い、という場合もあります。

ウェブプログラマーやウェブデザイナーはこれからはより専門的となりより深い知識が必要となってくる気がします。
Dreamweaverでホームページを作る人が増えたあのときの波のように、もしかしたら再びウェブページ作成ラッシュの波がくるかもしれません。

この、BiNDと言うソフト、私もなるべく早い段階で入手して使い勝手などをお知らせしたいと思います。

それでは、今日はこのあたりで!

レスポンシブウェブデザインの作り方 

こんにちは。nekonomoridesignのyoshyです。
最近、お仕事ではもっぱら、レスポンシブウェブデザインの為に、EC CUBEのデフォルトテンプレートをいじり、レスポンシブウェブデザインになるようにCSSと睨めっこして、慣れない作業に毎日うなっています。

そもそも、レスポンシブウェブデザインとは

簡単に言えば、見る端末によって最適な見た目でウェブページをデザインすることで、CSSをつかって、各端末に合わせたデザインで見せ方を変えるというものです。ちなみに、このブログも、レスポンシブウェブデザインになっています。レスポンシブウェブデザイン対応のテーマを使っています。Twenty fourteenというテーマを使っています。

レスポンシブウェブデザイン対応のwebサイトは検索結果の表示にも影響があるといううわさ

 

最近、Googleさんの検索ランキングの評価対象に、レスポンシブ対応のwebページかどうか、というのが要素として加わったそうです。おそらく、タブレット、スマートフォン等の端末も増えた影響でしょう。中途半端な大きさのタブレット端末だと、たしかにPC用サイトを表示すると、編に横スクロールしないといけないなどで見づらいところもありました。
ユーザビリティ性を重視した検索結果を求めるgoogleさんですので、納得ですが、こういった時代の流れに対応をしないといけないので、やはりweb業界はいかにスピードを早く対応していかないといけないのかがよくわかります。

レスポンシブウェブデザインの作り方

とりあえず、根本的にCSSを理解していないと無理です。(CSSでサイト作成の不慣れだったのですごーく苦労しています)
EC-CUBEとかの場合、SmartyというPHPテンプレート等の構成も調べながらじゃないと思い通りにならないです。

普通のwebサイトを作る際にレスポンシブデザインを気にしてつくる、というのであれば、レイアウト的に苦しくない範囲でデザインしていけば大丈夫かと思います。

で。

HTMLの作り方ですが、基本的に普通に作ります。
レスポンシブウェブデザインは、CSSで「見せ方」だけを変えているので、レイアウトや配置も、「見せ方」で変えています。

たとえば、PC用では見せておきたいDIV要素でも、スマホ用では不要な場合は、そのDIV要素のIDやCLASSを、 display:none にしておくだけなので、HTMLそのものは、1個です。

作るのは、CSSを、各端末用のものをデザインするのです。

一般的?というか、私の場合ですが、以下のようにしています。

スマホ用CSS、PC用CSS、タブレット用CSS

をそれぞれ用意。

それを、HTML上では3つ全部読み込ませる感じです。

CSSの設定の方法

CSSを作る時に少し細工をします。
********横幅640pxまで*************************
@media screen and (max-width: 640px) {

ここの間にCSSをかく

}
*********************************************

というような感じで、各サイズに合わせたものを作ります。

ちなみに、PC用の場合、

********横幅780px以上*************************
@media screen and (min-width: 780px) {

ここの間にCSSをかく

}
*********************************************

という感じにします。

そして、ココ大事。

width とかの設定は、必ず「%」で設定すること!!!

じゃないと、可変(端末の大きさによってサイズが変わること)にならないので。。

可変しなきゃ、レスポンシブの意味が無いです。

という事で・・・。

CSSを使いこなせないと、レスポンシブウェブデザインは出来ない・・・です。

これからも悪戦苦闘しながら頑張ります。

それにしても・・・レスポンシブウェブデザインの作り方がまさかCSSで見せ方を変えていただけとは驚きでした。
新たな発見!

目指せ、出来るwebデザイナー!