今まで「デザイン」としておいていたページをサービス概要ページに変更、パララックスデザインを取り入れ、動きのあるページにしました。
ティザーサイトのようなパララックスメインのレイアウト以外でもイラストやダイアグラムを効果的に見せるためにパララックスを使う機会も今後増えそうです。
タグ: ページ
Webページのテスト表示にDropBoxをつかう
昨年末から本格的にDropBoxを使い始め、Web制作で何かと便利な代物だということに気づいてしばらく、Webページで使うjQueryなどの動作確認にDropBoxのPublicフォルダを活用してみることにしました。
DropBox Automatorというツールを使えば、自動的にアップすることもできるのですが、常に更新されるわけではないので、難しいことは一切せず、デフォルト機能のpublicフォルダに制作しているページと使っているデータ一式をコピペ。あとはコピペしたページを右クリック→DropBox→「パブリックリンクのコピー」。
そしてアドレスバーに貼り付ければ確認することができます。
CSSなどで絶対パスを使っていると同じディレクトリ構成にしないといけないので見れない場合もありますが、jQueryなどでデザイン、レイアウトを整形している場合などに活躍してくれます。
余談ですが、DropBoxに日ごろ入れているのは、
- 複数の端末で使いたいダウンロードファイル
- 制作中の制作データ
- 制作、更新が必要なWebサイトのデータ
- HTML5ベースのテンプレート(HTML5,js,cssのセット)
- 外出先で使うこまごまとしたデータや画像（地図やQRコードなど）
- スマホで使う着信用の音楽データ など
デザインは大画面のデスクトップですることがほとんどですが、コードはラップトップでやることが多くなり、記事のまとめなどはほとんどEvernoteでするようになりました。
Dropbox ×Evernote があれば外出先や移動中でもラップトップがあれば作業できるので重宝しています。ちなみにドコモのスマホユーザーならEvernoteのプレミアムプランが１年間無料で使えます。
http://db.tt/Jcjoz049 このアドレスからDropboxを登録してもらうともれなく2GB＋250MBの容量で始めることができるのでこれからという人はぜひ！
jQueryを使ったトップページイメージ用プラグイン「Slide interface」
以前作った「fallslider」を再設計して新たに作りました。
特設ページも開設しました。
再設計し、画像だけでなくHTMLコンテンツへの対応もできるようになり、順を逐って説明が必要なものなどにも使うことができます。
使い方は、
ページにjQuery(1.4.2以上)、プラグインJSファイル（slide_if.js）、CSSファイル（slide_if.css）を設置して、表示したい部分に
<div id="slide_if"> <div id="slide_if_view"> <div id="slide_scene_a"></div> <div id="slide_scene_b"></div> </div> <ul id="scene_list"> <li>表示させたい画像などをリストないに記載</li> <li>上限は指定していないので追加可能。</li> </ul> </div> <br clear="all" />
上記ソースを記述。liに表示したいもの（画像など）を追加することでスライドアニメーションを設定できます。
機能面は完成次第、順次追加していきます。
またグレードをあげたバージョンでブロック要素での構成を可能にしたいと考えております。→現行バージョンで対応しました。
要望などあればコメントorメッセージorTwitterなどにいただければ幸いです。
ページにTipsなどをバルーンで表示できるbubbletip
jQueryをつかったTipsなどのバルーン表示を行う「Bubbletip」。
使い方
リンクのタグなどにIDを設定し、その後に表示したいバルーンの内容を記載。
<a id=”a1_up” href=”#”>above</a>
表示したいバルーンは予め「display:none」を設定。
<div id=”tip1_up” style=”display: none;”>
<pre class=”tip”>{ deltaDirection: ‘up’ }</pre>
</div>
そしてヘッダー部などにJavaScriptを以下のような形で記載。
<script type=”text/javascript”>// <![CDATA[
$(window).bind(‘load’, function() {
$(‘#a1_up’).bubbletip($(‘#tip1_up’));
});
// ]]></script>
バルーンを消すスクリプト
$(‘#a1_up’).removeBubbletip();
特定のバルーンを消す場合
$(‘#a1_up’).removeBubbletip([$(‘#tip1_up’), …]);
といった形で使います。
ブログやTipsサイトのちょっとした説明など様々な用途で使えそうです。
http://code.google.com/p/bubbletip/
cdbk.net CREATIVES.制作料金表ページを設けました。
スライドショーをページに追加できるNivo Slider
jQueryを使ってページにスライドショーを簡単に追加できるNivo Slidarをcdbk.net CREATIVESに導入してみました。
lightviewとJavaScriptの一部が競合してしまうので同じページに置くことはできませんが、複数の同じサイズの画像をひとつのコマで表示できるので便利です。
表示を切り替えする際のエフェクトもいくつか用意されているので、気になる方は配布元のデモページを見てください。
Nivo Slider
「Nivo Slider」をGoogleで調べる
ページからノードに移り変わるとき
今までページという単位で考えられることが多かったWeb。しかし最近、ページにとらわれないメタ、もしくはデータを基本においた方法を取るべきだと言われはじめている。
Webを紙面媒体に置き換えた場合に出てくるものがページだとすると現状のWebページで言われている情報量の上限や印刷を考慮した形式などの説明がつく。ところが、クリック、もしくは半自動でページ内がリロードできてしまう、もしくはFlashなどによって動的にコンテンツ内を移動できる動線を前提においたとき、ページという単位はさまざまな不都合な問題を引き起こす。例えば、コストの算出や構成時のやりとりなど、ページという枠にはめてしまうと作りやすい反面、表現の幅は確実に狭くなる。
Webを構成しているものはデータとそれを保管する場所そしてその場所までたどり着くまでのインフラである。この３点を結ぶノードの順路をどのような思考、もしくは論理で結びつけるかによってデータの持つ価値は変わってくる。たとえば、その順路の導き方次第では同じデータを持っているA社は有効利用できるサービスを行うことができても同じデータを持っているB社には何もできないもしくはそのデータ自体に価値を見いだせない場合も数多くある。
その点で、ユーザーの扱いやすいノードをユーザー自身がセッティングできるYouTubeやdeliciousなどは非常にうまい方法を採用している。
ページという単位での遷移の導き方では、作り手にノードのセッティングやデータ量自身が制御されてしまう。作り手が把握している部分のみを見せたい方法で見せることはできても、ユーザー自身が情報の収集方法やノードの選択を行うことはできない。
人が考えるノードのセッティングは皆同じとは限らない。そこを無数にできないとしても複数の選択肢を作ることが今後のサービス展開には必須になってくるのではないだろうか？
自分自身が学生時代に考えていたノードをセッティングする方法を近いうちに形にできそうな、そんな時代になってきました。