Web serviceの最近のブログ記事

2011年11月10日 Design Web service

高品質なWebデザイン素材（PSD）がダウンロードできるサイトまとめ

このボタンのデザインって、どうやって作るのかな？
質感のあるWebデザインのパーツや素材の作り方が分からない、知りたい！って方におすすめする、
Webデザイン用の高品質なPSD素材がダウンロードできるサイトをご紹介します。

眺めるだけで、デザインの参考や学習になるのはもちろんですが、
ダウンロードしたpsdデータを読み解くことで、制作の裏側を学ぶこともできます。
レイヤー効果やテクスチャーなど、このように使っているのか！と発見があり勉強になります。

みなさんもぜひ参考にしてみてください。

Elemis

ページデザインのテンプレートから、パーツ、パターン、テクスチャ素材等をダウンロードできるサイト。
細部まで緻密に作られているデザインは勉強になります。

Freebies Booth

ボタンやメニュー、アイコンなど、主にデザインのパーツを紹介しているサイト。

Free PSDs & Resources for Web Designers by Orman Clark

Orman Clarkさんによって作成された、デザインパーツサイト。
フォームやボタン、グラフィックなどがダウンロードできます。

※ライセンス、利用条件にについては各自ご確認ください。

(yukari)

2011年9月 1日 Coding Design Web service

クロスブラウザチェックに欠かせない便利ツール

クロスブラウザとは: 「複数のブラウザ上で，正常に動作すること」を意味します。

企業様のサイトでは、まだまだIE6が閲覧対象であったり、
最新の環境でも閲覧できることが必須であったりと、
Web制作においてクロスブラウザのチェックは欠かすことの出来ない重要ポイントです。

最終的には実機での確認となりますが、制作段階でチェックに気を配ることが出来れば、
"チェックバックで大幅な修正をしなければいけない "
という最悪のシナリオも回避できるかもしれません！

そんなわけで、今回はクロスブラウザチェックに心強い、便利なツールを紹介します。

Adobe BrowserLab

adobe社が無償で公開しているサービス。　（利用にはadobe IDでのログインが必要）

現時点で確認できるブラウザ環境は、

■windows: IE(6 ? 9), Firefox(3.0, 3.6, 4.0), Chorome(9, 10)
■OS X : Firefox(3.0, 3.6), Safari(4.0, 5.0)
(2011/5/30 現在)
となっておりメジャーなブラウザはほぼ網羅されています。

インターフェイスもわかりやすくていいです。

プレビュー機能では2画面並べて表示したり、

「オニオンスキン」で重ねて表示させたりすることが可能です。

環境によるズレが比較しながら一目で確認できるので、
表示についてシビアな調整が必要なサイトでは特に重宝します。
レスポンスもよく、何より、Mac OS環境の表示状態が確認できるのがありがたい限り。

現在、私がよく活用するツールです。

※ベーシック認証が必要なサイトはプレビューが出来ませんので、ご注意ください。

Browsershots

非常に多くの環境での表示チェックが出来ます。

スクリーンショットを生成するタイプで、あまり多くの環境をリクエストすると、

結果が出るまでに時間がかかりますのでご注意ください。

IE Tester

IE環境での表示チェックでは有名なソフトですね。

プレビュー機能はもちろん、リンクチェック・JavaSciptも動作するので、
jsで動く部分のチェックもあわせて行うことが出来ます。

今でもIE6対策には欠かせないツールです。

Microsoft Expression Web SuperPreview

こちらはMicrosoftから提供されている、チェックツール。

私は旧バージョンを使用したことがありますが、
開発元が提供している分、動作に安定感を感じました。

今年3月にリリースされた最新版では、オンラインサービス（ベータ）の「リモートブラウザー」を利用することにより、
Mac OS 上の Safari 、「Google Chrome」、「Firefox」でのプレビューも可能とのこと。

試用期限があるものの、機会があれば使ってみたいツールです。

※このソフトは「Microsoft Expression Web 4」に含まれるツールの単体試用版として無償提供されており、
60日間すべての機能を試用できるそうです。
※「リモートブラウザー」は60日間の試用期間のみ利用可能。
※試用期間が過ぎたあともローカルで動作するIE6/7/8を利用したプレビューは可能です。

(Masanori)

2011年7月28日 Coding Web service

実務で使える便利なCSS3ジェネレーター5種

スマートフォンの利用者が増加するにつれ、HTML5とCSS3のコーディングもより身近になってきましたが
CSS3のプロパティは指定する箇所やコードが非常に多く視覚的にも判断しにくいのが難点。
そんな時に便利な、見て、いじって、実務に導入できるCSS3ジェネレーター5種類を紹介します。

Layer Styles

http://www.layerstyles.org/

Layer StylesはPhotoshopライクなCSS3ジェネレーターです。
使い方はまさにPhotoshopのレイヤー効果と同じで、
スタイルの数値を変更するだけでボックスに指定した効果が適用されます。
最後に左下にある『CSS Code』のボタンをクリックすると、
現在表示されているボックスに適用されているコードが生成されます。

生成可能CSS3：
border-radius, background-image, box-shadow

CSS3プロパティジェネレーター

http://css-eblog.com/eblog_sample/0912/css3-generator/

CSS3プロパティジェネレーターは全て日本語表記なので、英語が苦手な方にも扱いやすくなっています。
こちらも使い方はPhotoshop等のグラフィックソフトと操作方法が同じなので、感覚的に操作できます。
また、このジェネレーターはIE6向けのfilterも出力できるのでIE6も指定ブラウザであるときは便利です。

生成可能CSS3：
border-radius, background-image, box-shadow, text-shadow

CSS3 Playground by Mike Plate

http://css3.mikeplate.com/

CSS3 Playgroundはボックスをレイヤー化でき、複数枚重ねてグラフィックを作れる様になっています。
ボックスを追加する場合は、右上の緑の＋ボタン、削除する場合は赤のXボタンをクリックするだけです。
惜しいのは、複数ボックスを生成した場合、選択しているボックスしかコードがコピー出来ないところです。

生成可能CSS3：
border-radius, background-image, box-shadow, text-shadow, transform, column-count

CSS3.0 Maker

http://www.css3maker.com/

CSS3.0 Makerはアニメーションの指定まででき、Transitionの中にあるTransition Timingで動きの速度が変更できます。
また、通常状態かホバー状態か設定できるセレクトボックスが用意されているので、
アニメーションつきの少し凝ったナビゲーションを作りたい時に最適です。

生成可能CSS3：
background-image, background-image, box-shadow, text-shadow, transform, outline-style

Ultimate CSS Gradient Generator

http://www.colorzilla.com/gradient-editor/

Ultimate CSS Gradient Generatorはグラデーション作成に特化したできるジェネレーターです。
自分が作ったグラデーションを保存することができるので、頻繁に使うものやストックしておきたい時に便利です。

生成可能CSS3：
background-image

使用頻度が高くなりそうなCSS3のジェネレーターは色々あるので、
上手く使えば効率よく一歩進んだコーディングが出来るのではないでしょうか。

(kazuki)

2011年7月 7日 Coding Web service

初心者さんにおすすめ！HTML、CSS、Dreamweaver参考サイト＆書籍

HTML、コーディングの学習に実際に役立った、おすすめのサイトと書籍をご紹介。
これからwebを学びたい方、現在学習中の初心者さん必見！のおすすめ情報です。
よろしければ参考にお役立てください。

TAG index

HTML、CSS、JavaScript、をまとめて掲載してているチュートリアルサイトです。
カラーチャートのページも参考になりました。

HTMLクイックリファレンス

早見表や辞書変わりに検索できるサイトです。
HTML5、CSS3についての記述もあります。

初心者でも大丈夫スタイルシートを使ってみよう

○○しようという目的別にCSSの学習ができるサイトです。
サンプルがたくさん記載されているので画面を見ながら学べます。

効率的なサイト制作のためのDreamweaverの教科書

書籍にそってサンプルサイトを制作することで、Dreamweaverを使用したサイト制作の一連の操作が学べます。
機能だけを網羅した書籍に比べ、実践的な使い方が学べる点がとても役立ちました。

HTML、CSSを一通り理解した後は、Dreamweaverを使ってサイトを一通り作って見ること。
入門者さんにおすすめの学習方法です。

(yukari)

2010年9月 9日 Web service

Twitterの不思議

クリエイティブと関係ない話なんですけど。

ひとつ、ビックリすることがあった。

Web業界に身を置いているので当然Twitterをたしなむ程度にはやっている。

筆者は自転車（スポーツバイク）が好きなのでそういった輪を少しずつ広げるようにしてきた。

少しずつなので約1年間で増えたフォロワーの数は80人程度。

ところがここ数日でフォロワーが倍以上になり、200人に達しようとしている。

「フォローされましたメール」が受信箱を占領しまくって削除していくのも大変である。

いきなり訪れた「俺フィーバー」に舞い上がってしまい、どんないけてるつぶやきをしてしまったのか振り返ったが、まったくいけてるつぶやきはしていないし、もちろんRTされまくったわけでもない。

原因は他にある。そういえばフォロワーが増え始めた時のフォロワーの現在地が京都が多かった。

位置情報をどこかに送信してしまったのだろうか。たしかに最近京都の鈴虫寺へ行き、必死に子どもが出来るようにお地蔵様にお願いして来たが絶対に関係ない。もちろん「京都なう！」なんてつぶやきもしていない。

自分で考えても原因がわからなかったので、ネットのえらい人の解説でも探そうということで検索してみたら以下のサイトがヒット。

江戸っ子が斬る!! 感情的起因からの論理思考

http://plaza.rakuten.co.jp/webtrpg/diary/201008120000/

その記事の中に「フォローする相手の影響力」というのがあった。

なるほど、単純なことだが自分がフォローした影響力ある人間を経由して集まってくるというのはあり得る話。誰なんだろうか影響力のある人間って・・・。知らず知らずのうちに誰か影響力のある人にフォローされていたんだろうか。

Web業界に身を置いている以上、このフォロワー数が伸びる原因、秘訣を探りたいところではあるが、力不足ゆえはっきりとしたことがわからなかった。

かわりと言ってはなんだが、Twitterのぐっと来るアイコンを集めてきたのでそれで許してほしい。

必死にかき集めてこのレベル。申し訳ない。この世にはあまりぐっと来るアイコンは無いようだ。逆にこの状況を利用してオリジナルアイコンを配布するようにすればアフィリエイトで一儲けしようなんてことも可能だ。きっと素敵なアイコンを探している人も多いだろう。

それにしても、こんな短い期間にフォロワーが増えるといろいろと考えることもあった。

今までのタイムライン（以下TL）は、基本こちらからフォローした人々のつぶやきで占められていたので、もちろん自分の興味範囲内の内容も多く楽しめたし、ためにもなった。

だが、いろんな方面からフォローされまくって律儀にリフォローしまくるとTLは大変なことになる。

よくわからない単語を繰り返し叫ぶ人から怪しすぎるネット起業家の儲け話やらで占められてしまう。

怖いのが単にフォロワー数を増やすことだけが目的になり、しかもそれが楽しくなってくることだ。

僕でさえ半日くらいの間はそれが楽しくなっていて、フォローされましたメールの着信を知らせる携帯のバイブ振動がある度にエビス顔になっていた。

僕のフォロワーの大半が何万というフォローとフォロワーの持ち主である。まあビジネス目的の利用者が多いわけだが、そのビジネス目的で何万というフォロワーを抱えるのは当たり前だし理解できる。ただ稀にいる有名人でもない個人利用者で何万・・・というのはどういう目的なんだろうか。

数遊びに夢中になってしまったか、心の隙間をネット上のコミュニケーションで埋めたいのか、実はbotでしたなんてオチかもしれない。

(yutaka)

2009年12月25日 Web service

Labを探検

今回ジーピーオンラインから発信される「R&Dらぼ+」なるブログポータルの公開に合わせて、世界中の「Lab」を探検することにしました。

ジーピーオンラインのLabはさまざまな視点からWebの情報を発信していくというものですが、世のLabと言われているサイトはその名の通り新技術や新アイデアを試す実験室という意味合いが強いようです。

いずれはそういった実験室のようなものがコンテンツとして盛り込めることを願いつつ探検に行ってきます！

「Google Labs」
http://www.googlelabs.com/

とりあえずここだろうということで、Google Labsです。
Googleのエンジニアがさまざまなソフトウェアを公開して、ユーザーの反応を基に改良を加え、有用なものであるかどうか見極める試みだそうです。なので将来必ずしも正式にリリースされるわけではないようです。

いきなり英語なので素通りしようかと思いましたが、その中の一つのツールに引き寄せられました。（一番上にあっただけですが）そのツールは「Browser Size」というもので、Webページのどの範囲までがどれくらいのユーザーに見えるのか
ということを教えてくれます。要はユーザーのディスプレイ解像度を視覚的にわかりやすく教えてくれるツールということですね。技術的には簡単そうに思いますが、我々Web制作者からすれば重宝するツールと言えます。

Browser Size
http://browsersize.googlelabs.com/

早速ジーピーオンラインのトップページを検証。
・・・まあ合格でしょう！さすが！

「Lat Long Lab」
http://latlonglab.yahoo.co.jp/

すでに息切れしてきましたが次はYahoo!JAPANのLabにお邪魔しました。日本語で書かれているのでどういったサイトかは一瞬で分かります！地図・位置情報をテーマに、経緯緯度情報を活用した実験サービスを公開しているということです。

その中で気になったのは「猛レース」というシンプルなネーミングのサービスです。「ひとりで走って、みんなでレース。」というキャッチが指すように、バイクや自転車で自分が走ったGPSやラップデータをアップし、その他大勢のユーザーとWeb上でタイムを競い合うというものです。

普段孤独で自転車を走らせている筆者ですが、こういったサービスがあると寂しさも紛れるのでしょうね。地図・位置情報は普段の生活と密接に関わり合っているのでアイデアによってはもっと面白いものが生み出せそうです。

またYahoo!JAPANは「Yahoo!ラボ」というコンテンツも公開していてユニークなサービスを公開しています。
http://labs.yahoo.co.jp/

本当に息切れ・動悸がしてきましたので、探検は中止にさせていただいて、ざっとその他注目のLabをご紹介しておきます！

「au one ラボ」
http://lab.auone.jp/

「Ameba Labs」
http://labs.ameba.jp/

「面白ラボBM11」
http://bm11.kayac.com/

「@niftyラボ」
http://www.nifty.com/labs/

「はてラボ」
http://hatelabo.jp/

今回いろんなLabを探検してきました。
共通して言えるのは顧客の声を参考にもっと役に立つサービスを提供していきたいという姿勢を持っているということですが、数々のアイデアの中からビジネスとして成功するサービスはほんの一握りしかありません。過去に成功したサービスがどのようにして成功したのか、その過程を探ってみたくなりました。

次回は「成功したサービスの謎を息切れせずに暴く！」という感じでいこうと思います。ご期待ください。

（yutaka）