WEBデザイン / カワズの唄

スポンサーサイト

            
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

超簡単にWEBサイトが作れる"Strikingly" 前編!

            
Category : WEBデザイン
前々から「制作中」と言いながら、諸般の事情でいっこうに進捗のない蛙堂サイトですが、いよいよ埒が明かないので、仮のサイトをオープンしました。
ただし、現在は限定的に依頼を受けているので、問合せフォームなどは故意に『準備中』としています。

蛙堂ポートフォリオ on Strikingly


さて、"on Strikingly"とは何か。

実は、仮のサイトという事で、"Strikingly"というサイト制作サービスを利用させていただきました。
これがまた最高に簡単に、シングルページのWEBサイトが作れるサービスなのです。
『最高に簡単に』とは、海外IT企業の日本法人が使う変な日本語のようですが。

巷には似たようなサービスがありますが、本当にこれが最も簡単!
しかもメニューがすべて日本語なので、なんら迷うこともありません。

最高のエクスペリエンスをあなたに!

とはいえ、いくら簡単だと言っても『Strikingly 使い方』とかググっている人もいるわけで。
ならば私がお手伝いしましょう。
間違いなく長くなるので、複数回に分けて説明したいと思います。
今回は第一回!

驚くほど簡単なWEBソリューションで云々


1.登録をする


まずユーザー登録をします。
今回は使い方の説明用に作っただけなので、使い捨てのメアドを使いました。


使用したいユーザー名、メアド・パスワードを入力し『早速、始めましょう。無料です!』をクリックします。
登録アドレスに認証メールが来るわけでもなく、すぐに始められます。



テンプレを選びます。
まずは目的によって、3種類から選択します。


ひとつめの「ビジネスまたはプロジェクト」を選択すると
続いてそれに応じた5つのテンプレが表示されます。

それぞれにデモページもあります。

1.FRESH→デモ
2.APP SHOWCASE→デモ
3.ONYX→デモ
4.BRIGHT→デモ
5.PITCH DECK - LIGHT→デモ(江南スタイル注意)


『パーソナルサイト』には3つのテンプレが。

1.PERSONA→デモ
2.FRESH→デモ
3.FRESH(なぜ同じ名前が3つも?)→デモ


そして『ポートフォリオ』には4つのテンプレがあります。

1.IVORY→デモ
2.ECHO→デモ
3.ION→デモ
4.PERSPECTIVE→デモ


蛙堂のサイトは『ECHO』を使って作成しました。


ちなみに左側のサイドバー、今は『マイページ』がアクティブになっていますが、2番目の『アカウント』ではユーザー名のや登録メアド・パスワードなどの変更ができます。


その下の『料金プランとアップグレード』は有料版に興味がなければスルー。
興味がある方は、4番目の『特典』で、無料でプロ版を利用する権利をゲットできます。


『いいね!』すると有料版の機能が1週間使えるそうです。
1週間。



2.編集をする


さて今回は『PERSPECTIVE』を使ってみたいと思います。
去年あたりから絶賛流行中のパララックススクロールです。

使用したいテンプレートにカーソルを乗せると出てくる、『編集を始めましょう!』というボタンをクリックして始めます。


ツアーの案内が出ますが、僕は『いいえ結構です』にしました。

興味のある方は見てみてください。

左側の『設定』をクリックすると


ページタイトルや任意のアドレス


メタタグなんかを設定できます。


『更新』をクリックして、『終了』

さて次回はなんと、いよいよページのデザインとコンテンツに着手したいと思います。


お楽しみにね!



スポンサーサイト

これ便利! 常用したいWEBサービス10選+1

            
Category : WEBデザイン
n695.jpg

世の中には様々なオンラインツール(WEBサービス)があります。
そんななかで、僕が使ってみて便利だったものを今回はご紹介します。


まずは

WEBデザイナーにおすすめサービス


jpegmini500.jpg

見た目そのまんまで、画像のファイルサイズを大幅にダウンサイジングしてくれます。
一枚ずつであればユーザー登録なしでも出来ますが、登録すれば複数ファイルを一括で処理してくれるので、非常に便利です。





loadinfo.jpg
   
"NowLoading..."などのローディングgifを生成し、ダウンロードできます。
132種類の中から選んで、色と大きさをカスタムします。
loadinfo00.gifこんなloadinfo01.gifこんなloadinfo02.gifこんなんが出来ます。





rethumb.jpg
   
指定した大きさに画像のサムネイルを作ってくれるサービス。
って、そんなもん別に普通にあるだろう、と言いたいですか?
ちょっと待って下さい!

これは先ほどの画像を幅100pxに縮小したものです。
画像のURLを見てください。


"http://api.rethumb.com/v1/width/100/http://blog-imgs-54.fc2.com/f/r/o/frogie/rethumb.jpg"
となっていますね。
"http://api.rethumb.com/v1/width/100/"というURLのあとに画像のURLを付け足すだけで、縮小画像のリンクを作ってくれるのです。
"width/100/"の部分は、数字を変える事で、生成されるサムネイルの大きさを変えられます。


widthではなくheightにもできます。ただし元より大きくは出来ません。
あくまで縮小だけです。


初回はロードに少し時間がかかりますが、それ以降はキャッシュしといてくれてるので軽快です。





liveweave.jpg

WEB上で使えるHTMLエディターは色々とありますが、僕が知る限りこれが一番シンプルで使いやすかったです。
入力補完もしてくれますし、プレビューのオンオフもできます。
ワンクリックでjQueryも読み込めますので、「ちょっと試したい」というときにはピッタリだと思います。  





procssor.jpg
  
一生懸命書いたはいいが、ゴチャゴチャと見づらくて恥ずかしいCSSを綺麗に整形してくれます。
これで、他人にソースを見られても、とりあえずは恥ずかしくないですね!
ただし、文法の間違いなどは直らないので、ご注意を。




続いて

SNSやブログに使いたいサービス


blogtool.jpg
   

ソースを「そのまま表示する為のHTMLソース」に変換
してくれるサービスです。
<pre>タグで囲んだり、
&lt;pre&gt;
のように特殊文字を実体参照に変換してくれます。
いちいち、「これの実体参照なんだったっけ?」と調べたりする手間を軽減してくれます。

この記事のようにソースコードを表示しているときは、必ずこれを利用しています。





lunicode.jpg
   

入力したテキストを、左右や上下反転などの加工をしてくれます。
って、そんなもん別に普通にあるだろう、と言いたいですか?
ちょっと待って下さい!

そこらのサービスと決定的に違うのは、その反転文字などを無理やりテキストで表現してくれるのです!

元のテキスト
Dance To The Radio
左右反転
oibɒЯ ɘʜT oT ɘɔᴎɒᗡ
180度回転
oıpɐᴚ ǝɥ⊥ o⊥ ǝɔuɐᗡ

無理矢理感ハンパないですが、面白いのは間違いないです。
どう使うかは、あなた次第!





copypastecharacter.jpg

先ほどのと違い、特殊記号をメールなどにそのまま書きたいときに、ワンクリックでコピーできます。
なのでリストを
✪こんな感じに
௹こんな感じに
☮こんな感じに
☯こんな感じに
♘こんな感じに

できますよ!




最後は

その他のサービス


judress.jpg
   
日本語表記の住所を、英語表記のアドレスに変換してくれます。
住所+アドレスでジュドレスですね。





mapfrappe01.jpg

面積を比べるサービスです。

上下に地図が2つ並んでいて、地図上の大きさを比較することが出来ます。
上の地図で、元の範囲を線で囲み、下の地図を動かして比較します。

ていうか言葉で表現しづらいので、実際に試してみてください。
メルカトル図法の歪みも反映されていますので、意外な結果が見れたりします。

mapfrappe02.jpg
ばかでかいと思っていたグリーンランドは、実はたいして大きくないみたいですね。
完全にヒマつぶし程度ですが。





freenaturesoundsmixer.jpg

これらのサービスを利用して作業をしているとき、ぜひ利用してほしいのがこのサイトです。
ミキサーが4チャンネルあって、それぞれに環境音をロードして再生できます。

中でも激しい雨音がオススメです。
雨音にはリラックス効果があるのです。

作業がもう、はかどってはかどって仕方ない!



というわけで、これらのサービスを皆さんの作業のお供に役立てていただけたら幸いです。

お手軽イージングスクロール!

            
Category : WEBデザイン
以前の記事で、ページスクロールをヌルヌルっとイージングさせる「jQuery.nicescroll」を紹介しましたが、あれはスクロールの動きだけでなく、スクロールバーまでもカスタムしてしまうものでした。

その後、鋭意制作中の蛙堂サイトで使用しようとしたら、どうもレスポンシブレイアウトとの相性が悪いのか、スクロールバーが、ものの見事にバグいです。

こりゃいかん、あきらめるか。
いや、スクロールをヌルッとさせるだけのものなら大丈夫のはず!

というわけで、血眼になって探しまわってみたところ、こちらのサイトで素晴らしいjQueryを発見したのです。
『マウスホイールすると余韻が残るイージングスクロール』だそうで、『余韻が残る』とは実に上品な表現ですね。
ヌルッと』とは大違いです。

作者さんのデモページ


使用方法ですが、まずは当然jQuery本体を読み込みます。
それから、jquery.mousewheel.jsjquery.easie.jsを入手して読み込んで下さい。

※jquery.mousewheel.jsは、リンク先でのダウンロード方法がやたらと判りにくいので、
 内緒でこちらに置いときます。右クリでダウンロードして下さい。


ここまではこんな感じです。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="jquery.easie.js"></script>


それから、先ほどのリンク先の作者さんが考案したjQueryを記述します。

<script type="text/javascript">
$(function() {
var scrolly = 0;
var speed = 500;
$('html').mousewheel(function(event, mov) {
if(jQuery.browser.webkit){
if (mov > 0) scrolly = $('body').scrollTop() - speed;
else if (mov < 0) scrolly = $('body').scrollTop() + speed;
} else {
if (mov > 0) scrolly = $('html').scrollTop() - speed;
else if (mov < 0) scrolly = $('html').scrollTop() + speed;
}
$('html,body')
.stop()
.animate({scrollTop: scrolly}, 'slow',$.easie(0,0,0,1));
//イージングプラグイン使わない場合
//.animate({ scrollTop: scrolly }, 'normal');
return false;
});
});
</script>


各部の説明は作者さんに任せるとして、上記丸写しで動きます。
作業はこれだけです。なんて簡単なのかしら!
みなさんもこれ丸写しで、お手軽イージングスクロールを実現させてやって下さい!

…それにしても、下の16行目「イージングプラグイン使わない場合」って、使わないんだったら何のためにこんな事やってるんだろう??

最近使ったjQueryプラグイン

            
Category : WEBデザイン
ただいま蛙堂の紹介用ポートフォリオサイトを鋭意製作中であります。
ショッボいものにはしないので、完成した暁には是非みなさん寄ってってって下さいな!

そんなわけで、今回は思いっきりネタバレかましてみたいと思います。

蛙堂サイトに使用したjQueryプラグイン一覧です。


1. jQuery Masonry
s-Masonry.jpg

一時期流行って廃れかけて、また最近グイグイと伸びてきた『レスポンシブなグリッドデザイン』を実現するプラグインです。
ググってみると色んなサイトで紹介されているのですが、どの説明もいまいち中途半端。
そんななか一番わかりやすく参考にさせていただいたのがこちらのサイト

ちなみにリンク先のサイトで恥ずかしいコメントを残している『frogさん』とは私のことです。


2. jQuery Chaining Effects Plugin


指定した要素を順番に読み込んでいくプラグインです。
国産なので使い方もわかりやすいです。
公式サイトでは「ゆるふわっと」と表現してますね。

感じわかります?ゆるふわですよ。

大人かわいい、愛され系のプラグインてことですね。


それから、以下の2つはまだ利用を検討中のものです

3. Page Scroller
s-PageScroller.jpg


いつも参考にさせてもらってるコリスさん謹製のプラグインです。

ど定番の、気持ちよくスクロールしてページトップに戻るボタンを簡単に実装できます。
とはいえリンク先の説明はダラダラと長ったらしくて、読むのが少し嫌になりますが。(←悪口?)


4. Pirobox V1.2(旧版)
s-Pirobox.jpg


世の中には色んなLightbox系のプラグインがありますが、このPiroboxは参考サイトのデモを試してもらえばわかりますが、現れ方がめっちゃ気色いいんですね。

なんとも口では表現できませんが、気色いいんです。

さらにデザインもシックだし、画像を別窓で最大表示することもできます。いうことなしです。

実際にはPIROBOX EXTENDEDというのが最新版で、こちらは画像のみならずHTMLの表示にも対応しています。が。デザインが気に入りません。
CSSでうまくリフォームできれば良いですが、めんどっちい場合もありますので他にも選択肢はないか検討してみます。



といった感じで4種類のjQueryの導入を予定しております。
実は他にも使いたいものがあったんですが、あんまりやりすぎて重くなってしまうのは最悪に等しいので、ほどほどにしときました。


というわけで、繰り返しますが完成した暁には是非みなさん寄ってってってって下さいな!

スクロールの動きをカスタマイズ

            
Category : WEBデザイン
~2013.8.3追記~
急に一部ブラウザで動かなくなりましたので、原因が解るまで当ブログでは、このスクリプトは使用中断します。




ところで、このブログをマウスでスクロールしてみて何か気づきませんか?
なんだかヌルヌルと気持ちよく動くでしょ?

それに良く見ればスクロールバーも違うでしょ。

今回はjQuery.nicescrollを利用して、ページスクロールの挙動スクロールバーをカスタマイズしてみます。
非常に簡単です。

まずは配布先のinuyaksa / jquery.nicescrollにアクセス。
真ん中より少し上の『ZIP』からダウンロードして下さい。

FC2で使う場合は、管理画面の『ファイルアップロード』でjQuery本体とプラグインをアップしておいてください。
このとき気をつけないといけない事がひとつ。
FC2では、ファイル名に『.』(ドット)を含んだものは使えないらしいんです。
なので事前にドット無しのファイル名にリネームしておいて下さい。
(もちろん拡張子のドットはあっても大丈夫ですよ。ていうか無いと駄目ですよ。)

ヘッダ内の記述はこんな感じ↓

<script src="js/jquery.min.js"></script>
<script src="js/jquery.nicescroll.min.js"></script>
<script>
$(document).ready(
function() {
$("body").niceScroll({
cursorcolor:"#c00", // スクロールバーの色
cursorwidth:"10px", // スクロールバーの幅 
cursoropacitymax:"0.7", // スクロールバーのアクティブ時の透明度
cursoropacitymin:"0.4", // スクロールバーの非アクティブ時の透明度
cursorborderradius:"5px", // スクロールバーの角丸
});
});
</script>

デモサイトは、まさにあなたが今見ているこのページです。
上記のオプション指定で、ここと同じになります。

これ以外にもオプションが用意されてます。
こちらのサイトに詳しい解説がありますので、参考にして下さい。

実は僕も参考にしました。

めちゃ画期的なんですよ、このプラグインは。
だって今まで色んなjQueryを見てきましたけど、ソースに手を加えることなくスクロールバーをカスタマイズできるのは恐らく世界にコレだけですよ!(2012年現在)

簡単だし、使わな損ですよ!

いやマジで!

FC2Ad

カークランド

Back to Top

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。