BLOG﻿メニューとウィジェットFacebookTwitter検索:ABOUT当サイトは株式会社アートグラフィック新潟WEB制作ブログです。WEB制作にまつわることや新潟の情報など投稿していきます。会社のホームページはこちら♪ご注意:記事は当時の情報を元に書かれておりますので、仕様が変更され記事と合わない事がございますので、その際はご容赦願います。制作現場まずはてっとり早くWebページを作ろう。CDNとCSSフレームワークとjQueryプラグイン自分でWebサイトを作りたい、更新は自社で行いたい、Webの勉強を独学で始めよう。思い立ったが吉日、書店に向かい分厚いHTML辞典を買ってくる。これ、だいたい間違いなく挫折します。その気になったのですから、Webって楽しいを体験してほしいのです。今回はCDNを利用して外部ファイルを読み込み、極力手数をかけずにWebページを作ってみたいなと思います。対象はちょっとならHTMLやCSSがわかるよ、という人向けになります。今回は前置きが長いので、面倒な人はこちらから。挫折のわけ何せHTMLをたくさん掲載してある本はとても分厚いです。Webサイトに触れた事のない人には意味不明は記号の集合体であり、自分がそれをどのように使うのかの想像が難しいです。HTMLを覚えてもレイアウトはできません。レイアウトするためにはCSSの知識が必要となります。今度はCSS辞典を買ってくるのでしょうか?CSSをクリアしても、自分がよく見ているかっこいいホームページにはなりません。見た目の装飾などはCSSでOKですが、動作的な部分になるとJavascriptを利用します。簡単なWebページにだって、こんな風にたくさんの知識やスキルが詰まっています。覚えなくちゃいけないことがたくさんある時、少なくとも私は挫折します。お手軽に作ってみようCSSフレームワークグリットシステムというものがWeb界を席巻してもうかなり経ちます。今ではたくさんのCSSフレームワークと呼ばれるものがたくさんあります。CSSフレームワークとはちょっと乱暴なまとめかたをすれば、デザインされレイアウトの方法を決めたCSS(場合によってはJavascriptやフォントも)をあらかじめワンセットにしてあるものです。BootstrapやFoundationなどといったところが世界的にもとても有名です。スマートフォンを始め、モバイル端末の対応はもはや必須のものとなりました。CSSフレームワークの多くは、レスポンシブWebデザインと呼ばれる、現在主流の方法でモバイル対応しています。CSSフレームワークを利用することで、モバイル対応のWebページを作る事ができます。CSSフレームワークは多くの人を助けてくれました。CSSやHTMLが不得意な人にはその形式を、デザインの不得手な人にはある程度完成されたデザインを。今回は数あるフレームワークの中からColiss様が紹介されていたBulumaというフレームワークをチョイスしました。(※自分の勉強がてら)Bulumaが他と違うのは、Flexboxという新しいCSSのレイアウトをメインにしたフレームワークであるという事です。CDNを利用するCSSフレームワークをはじめ、かっこいい動作をさせてくれるjQuery(Javascriptのライブラリ)のプラグインなど、世界中の多くの人が共通で利用するファイルを特定のサーバにホスティングしてみんなでそこを参照して使う。WebサイトでCDNを利用するをなんとなく説明するとそんな感じでしょうか?(厳密には違うと思う)GoogleやMicrosoftが公開しているCDNもあります。jsDelivrやcdnjsといったところもメジャーです。先ほど名前を挙げたBootstrapもCDNで利用できます。使いたいプラグインやフレームワークの名前+「CDN」で検索すれば、たくさんのものが見つかるでしょう。今回利用したものフレームワークはBulumaを、簡単にCSSのアニメーションを利用できるanimate.cssも利用してみましょう。これらはcdnjsから読み込みました。jQueryを利用したスライダーを入れたいので、jQuery本体(これがないと動きませんよ?)とslickというプラグインを利用します。Slickはjsdelivrからです。アイコンもWebサイトを作る上でとても重要な要素です。Awesomeというアイコンフォントを利用しましょう。Fontsを利用してみましょうか。Webページを作ろう上に挙げたものをhead内に読み込みます。href="//fonts.googleapis.com/earlyaccess/notosansjapanese.css">今回のページの内容あくまでサンプルですが、今回はよくある構成の1ページ完結型にしました。はじめにスライダーを設置して動きのあるコンテンツでユーザーを惹きつけます。画面幅目一杯のサイズで行きましょうか。それから簡単なコンセプトを説明したら、サービス内容、会社概要、お問い合わせフォームと続きます。マップも入れましょう。SNSのアイコンもいれて、ユーザーとつながりが持てるようにします。あとはBulumaの書式に従って、どんどんHTMLを書いていきますね。ここではBulumaの使い方の説明ではないので細かい事は説明しません。ドキュメントを見ながらレイアウトを作っていきます。カラム割やカラー、フォームのパーツデザインなどもあらかじめ決まっているクラスをHTMLに付与していきます。手なりでつくってこんな感じです。【DEMO】ちょっと余白がおかしいですが、それなりになんとなくそれっぽいです。HTMLの他にCSSとjQueryをちょっとだけ書きました。!important;}Webフォントの読み込みとスライダーの微調整、それからGoolgeマップをレスポンシブWebデザインに対応しました。false;});});jQueryの方はモバイル用のナビメニューの動作です。それからSlickの設定をして、スムーススクロールも入れときました。スムーススクロールは絶対に必要なものではありません。CDNやCSSフレームワークのデメリットこんな感じでそんなに学習コストも時間もかけずに、あるものを利用するだけでそれっぽいWebページを作ることができます。実際のサイト制作ではCDNやCSSフレームワークを使わないことも多々有ります。メリットがあるのと同様デメリットもあるからです。CDNのデメリットまず第一に他の人のサーバとソースを利用しているということでしょう。これは、そのサーバがダウンした場合やソースの書き換えが起こった場合に対処が遅れることがあります。意図的なことではなかったとしても、バージョンアップで自分のHTMLやJavascriptとかちあってうまく動作しなくなることも考えられます。他者のサーバにアクセスするので、読み込みのスピードもそのサーバのスペックに依存することになります。CDNを利用するメリットとして、多くの利用者がいるライブラリ等であればCDNから利用する事でキャッシュを利用できて速いというものがあります。CSSフレームワークのデメリットこれはjQueryプラグインなども同様なのですが、例えば今回のDEMOくらいであれば、はっきりいってこんなにいらないのです。フレームワークの機能で利用していないものがたくさんあります。ある程度知識があれば、フレームワークなどを使わなくても再現できます。利用していなくでもファイルは全て読み込みます。読み込む量が多ければ多いほどブラウザに負荷がかかりレンダリングが遅くなります。コンマ何秒でも速く、ということを考えると大幅に無駄です。専門的な話をすると、CSSはSassやLess何度をコンパイルして作ることが多くなっていますが、CDN経由でフレームワークを読み込むと直接CSSを読み込むので必要な部分だけ利用したいという要望に応えられません。※2不必要なCSSを打ち消すためのCSSが必要となり、ソースコードが長くなっていきます。多くのフレームワークでは、コンポーネントや機能によって分割されたSassファイルなどをダウンロードする事ができます。なにより、一番の問題となるのはフレームワークを利用する事によってデザイン的に似通ったものができやすいことが挙げられます。ボタンのデザイン、タイトルやメッセージ、フレームワークは綺麗に見えるようにデザインされています。それをそのまま使うことで、他の誰かと似たようなデザインになってしまうことがあります。CSS」というボタンを用意しました。HTMLはもとのまま、CSSのみを追加してデザインを変えて遊ぶ趣向です。ボタンをクリックするともとのデザインと、CSSを追加したバージョンが切り替わります。?ちょっとは違うサイトに見えますか?まとめこのようにまったく違うデザインをしようとするとCSSなどの専門な知識はどうしても必要になってしまします。そのために我々のようなWeb制作者もいるわけですし。作ってみる、自分でもやれるということを体験するという点において、CDNやフレームワークは大いに活用すべきかと思います。自分で作ったものがブラウザに表示されるって楽しいんですよ。最後に、こういうの使うときはちゃんとライセンスの確認をすることを忘れないでください。制作現場まずはてっとり早くWebページを作ろう。コメントを残す撮影事例(ネコ編)先日、梅雨の合間をぬって、カメラマンとサイトの制作で利用する写真の撮影に行ってきました。以前も記事を載せましたが、弊社ではWEBサイト制作の際、専属カメラマンによる写真撮影を行なっております。サイトもガラケーからスマホへと、よりリッチに見せる写真が求められています。サイト制作において写真にこだわりのある方は、ぜひ弊社までご相談ください。一眼レフによる撮影以外にも、特殊撮影として、ドローンを使った空撮や、360°記録する全天球写真などにも対応しております。今後当ブログでは、定期的に撮影事例を掲載していきたいと思います。今月は撮影の合間に撮られたネコ達の写真をおたのしみ下さい。今日はサイト制作材料として新潟市内の銭湯数件で撮影を行いました。季節柄、湿気と湯気に悩まされる撮影でした。カメラマンは苦労したと思います。WEBにおける写真のクオリティは以前よりもずっと重要になっています。写真の良いサイトはぐっと魅力的に見えるものです。弊社では、WEB制作においてクオリティにこだわった上質な写真を、弊社専属のカメラマンが撮影させていただきます。店内撮影から、人物、物撮りまであらゆる撮影に対応可能です。写真にこだわるWEB制作はお気軽にご相談ください。(写真はディレクターがさらっと適当に撮ったスナップですので、あしからず。