Web制作者が知っておいた方が良いと思う、HTML5ハイブリッドアプリのフレームワークについて | バンクーバーのうぇぶ屋
ここのところ、バンクーバーにある専門学校の方とお話することが多いのですが、WEBデザイナーの専門学校なんかの授業でもハイブリッドアプリの科目が取り扱われているみたいですね。最近はWEBデザイナーに必要なスキルの一つとしても、HTML5のハイブリッドアプリ開発は大事になってきてるんじゃないかなと思ったので、これから色々勉強してみようと思っている方向けに最初のとっかかり記事を情報共有として記事を書かせて頂ければと思います。 僕自身もアプリ制作専門で活動したことは無いのですが、最近は「WEBサイト作りましょう」で、モバイルの話が上がる事はほぼ絶対になってきていますよね。で、WEBという媒体を使って何かを提案する姿がWEBデザイナーである以上、そうやってフィールドがモバイルにも派生しているのであればアプリ面の知識も「全く知りませんでした」は正直避けたい所になっていくのではと思っています。 というわ
複雑化するWEB制作業界についてのこれまでとこれから目指す人達へ | バンクーバーのうぇぶ屋
さて、Frogの皆と一緒に書いているFrog Advent Calendar 2016、最終日という事で久しぶりにガッツリ頑張って書こうと思います。 Frogや僕のブログに限らず、WEB制作に携わる人であれば一度は「私もWEB制作者になりたい」と考える人から相談を受ける事って多いんじゃないでしょうか。 ある人は茨の道と言い、ある人はちょっと頑張ればなれると言い、また時代によっても相当意見が別れ、前線で活躍される皆さんも３年前に聞かれるのと、今聞かれるのとではまた意見も変わってくるんじゃないでしょうか。 というわけで、今日は僕がこれまで耳にしてきたWEB屋な皆さんのお話を元に、昨今どれだけWEB制作者のスキルセットや求められる物が変わってきているのかをざっくりとだけまとめてみようかなと思います。 北米圏で就職するときなんかはジュニアとシニアの枠に別れると思いますが、そういった区分を一度無視し
視覚障害や色盲の人が見てるWEBサイトの状況がわかる「ChromeLens」 | バンクーバーのうぇぶ屋
先日新しいWEBサービスのプロジェクトのメンバーの顔合わせが有り、その時に参加していたクリエイティブディレクターのお兄さんのプレゼンというか、デザインカンプを見る機会があったんですが、その時に様々なColorblind（色盲）の人が見た場合のサイトの見え方についてシェアしてたのが凄い印象に残ってたんですね。 例えば、単純にサイトカラーを決める時なんかでも「この赤で行きましょう」みたいな感じで良い場合もあるでしょうけど、そこに『この赤は色盲の人が見た時にこう見えるから、その時のことを考えてこんな配慮を…』みたいな話が出てくると、あーなるほど、そういう事も含めて考えているのかと納得させられます。 色覚障害者は100人に1人は必ず居るとされる程決して少なくはない症状の一つだと思いますし、カラーバリアフリーみたいな言葉もあるくらいなので、デザイナーの方であれば意識しておいた方が良い事なのかもしれま
修正依頼をよりスムーズに！ウェブ制作におけるバグ報告を超効率化するUSERSNAPが便利！ | バンクーバーのうぇぶ屋
WEB制作において、クライアントに確認の依頼をして、修正依頼って夜中に来たり、納期ギリギリに来たりすると困りますよね。それで愚痴る人も少なくないと思います。でも、よく考えたらなんでそんなに時間がかかっているんでしょう？ もしかしたら、クライアントが修正依頼を報告するまでの課程に問題があるのかもしれません。よくいるクライアントは、修正依頼を書くまでの課程が… 修正確認ページをぷりんとあうとー → 手書きで修正 → スキャン → 送信 → また修正見つけたけどさっきスキャンした紙どこやったっけ？ → またプリントアウト → 手書き修正 → スキャン → あれ一枚目の修正どんな内容だったっけ？ → 以下無限ループ ・・・・無駄しか無いわ！！！無駄以外探すのが難しいわ！！ まぁ、でもこれはクライアント側も可哀想。WEB屋ならまだしも、WEBサイトの修正依頼にどれだけの時間を使わせるつもりかと…そり
使いこなせばもしや爆速！？ここ最近助けられたチートシート色々を厳選してご紹介！ | バンクーバーのうぇぶ屋
さて、以前このブログではチートシートに関する記事を書かせて頂きました。もう1年以上前の記事になるんですねー。本当時間が経つのは早い物です…。 無くても良いけど、あったら意外と便利なチートシート。得に初心者の間はチートシートと睨めっこしながら色々な技術なりアプリなりと向かい合う事も僕は少なくありません。 しかし、当然チートシート関連もアップデートし続けた方が良い物。いつまでも古いチートシートばかり見ていたら、折角の新機能や便利ツールの存在に気づかず、ぬあーーーー！って成る事もあるやもしれません。 というわけで、今日はここ最近見たチートシート紹介第二弾！チートシートとして手元に置いておけば、いざというとき便利かもしれない物を、比較的新しそうな物から共有させて頂こうかなと思います！ それで行ってみましょー！ OverAPI.com | Collecting all the cheat sheet
無料の写真、動画、アイコンのリスティングサイト『AllTheFreeStock.com』がいい感じ | バンクーバーのうぇぶ屋
ここ最近は大手メディアなんかでもフリー素材を記事につかってアイキャッチ画像としている所が多いですね。コンテンツ力を高めようとする一方で、目を引く写真等を使ってファーストインプレッションを大事にしている記事も多いように思えます。 ですが、自分が知っている範囲でのフリーフォトストックって、以外とすぐに使い果たしたりしちゃいますよね。Creative Commonsライセンスの物を探そうと思うと意外と一苦労だったりします。写真の系統も「またか…」って思うような使い回しをしているサイトも多いですが、個人的には一つの記事に対し一つの写真（印象）を残すということは意外と大事なのかもしれないと思わなくも無いので、同じような写真は個人的に出来るだけ使わないようにしてます。 そんな時に、どうしてもフリーストック系の写真を探したい時に便利なのが今日ご紹介する『AllTheFreeStock.com』です！ こ
インストールされているフォントを比較検証するのに便利な『Font Flipper』！ | バンクーバーのうぇぶ屋
結構タイポグラフィに気を使う場面だと、パソコンに入ってるフォントをちょっと細かく比較したい時って無いですか？ 世の中には色々なフォント比較が可能なサービスやアプリケーションがあると思うんですが、今日ご紹介するWEBサービスは今まで見てきた物のなかで一番シンプルで使いやすいかもしれません。 テレビのチャンネルをぽちぽちと切り替えるような感覚で、PC上にインストールされているフォントを比較することが出来る超シンプルなWEBサービスなんですが、ちょっと初見だとわかりにくいかもしれんと思ったので、超簡単に説明させてもらおうと思います！ Font Flipper – Flip through your fonts とりあえずアクセスするとこんな画面が出てくると思います。PCのフォントをローディングしてるので『Flip!』というボタンの所が表示されたら準備OK！ 『Flip』のボタンを押すと左と右に”
シングルページなサイトをデザインする上で、知っておいて損は無いかもしれないプラグインとか色々！ | バンクーバーのうぇぶ屋
最近多いですねー、1ページで完結するタイプのサイト。One Page Loveのサイトなんかから、シングルページの事例も大量に見ることが出来ますし、パララックスやらフリップ型のコンテンツやら、なんか色々出てきてて着いて行くのがやっとです… でも実際シングルページをつくろうとすると、え？何これどうなってんの？って物も多くてビビることもしばし。 ってことで、今日は僕が知ってる中で『お、これ、シングルページ作る時に使えるんじゃね？』って物を幾つかご紹介させて頂きます！ 主にはシングルページデザインの表現の幅を広げるjQueryプラグインの紹介になるかなと思いますが、楽しい物も多いので、是非興味があれば試してみてくださいませ〜！ それではいってみましょー！ パララックススクローリング系プラグイン この辺は以前に紹介したことがあるものばかりなので、ぱぱーっと行きます。 jQuery Waypoint
誰でも簡単にかっこいいロゴが作れる『Squarespace Logo』 | バンクーバーのうぇぶ屋
以前『色々信じられないクオリティでWEBサイトが作れるSquarespaceが結構ヤバイ！』という記事を書かせて貰ったんですが、ここが次はロゴマークすらも手軽に作れるツールを作ったようなので、とりあえずご紹介。 とりあえず、物は試しと作ってみたロゴマークがこちら。 なんか、どっかで見たことある感じになりましたｗ でも、基本操作は非常に分かりやすい。 Squarespace Logo — Squarespace ステップ１．名前入力 とりあえずサイトにアクセスしてロゴの名前となる文字を入力。 ステップ２．ロゴマーク、ロゴタイプ、タグラインを設定 もう見たらわかるレベルのインターフェースですね。 ステップ３．作ったロゴをダウンロード 前画面で、左下の『Save Logo』を押すと上のような画面が表示されるので、低解像度の物であれば即ダウンロード。といってもサイトなんかで使うには十分な解像度だし
魔導師になって兵士を操作してJavascriptを覚えよう！っていうCodeCombatが面白い | バンクーバーのうぇぶ屋
僕は色々勉強しなきゃ行けないのは分かってるんだけど、勉強しなきゃなーとか言いながらズルズルとしてしまう人で、気づけばゲームばっかしてるような人間なんです。 もはや、WEB屋兼ゾンビキラーとか名乗った方がいいんじゃないかとこのまえ友人に冗談半分で言われましたが、そのくらいゲームは結構好きなんですね。（先月はCOD2のOriginsやりこんで、今はGTAVやってます…） そんな、学ぶの面倒だけどゲームは好きって人に、もしかしたらオススメできるかもしれない、CodeCombatというJavascriptを学ぶサイトを今日はご紹介させて頂ければと思います！ 内容は至って簡単で、ゲームをすすめる為にはJavascriptでコードを書かなきゃならないって感じの物。それっぽいのはいくつかありましたが、ちょっととりあえずやってみましょう。 とりあえず、PLAY！ どうやら僕はウィザードとしてプレイするよう
かっこいいグリッドベースの入力フォームが作れる『Grid forms』が良さげ！ | バンクーバーのうぇぶ屋
フォームのレイアウトっていざ作ろうとすると結構迷う事多いですよね。フォームのデザインはもちろん、どうしても入力項目が多くならざるを得ない時なんかは、考える事は底知れずって感じです。 今日はそんな時にもしかしたら便利ってなるかもしれないJS／CSSフレームワークの一つ『Grid Forms』をご紹介させて頂きます！ フォームデザイン苦手ーって人も、ちょっとこの辺から触ってみても良いかもですね〜。 Grid Forms Grid FormsのGithubからファイルをダウンロードしてみると、既にサンプルファイルが用意されているので、それ見ながらちょっとお話した方がいいかもっすね。 サンプルを開くと以下のようなフォーム例が表示されると思います。 なんか紙の入力欄みたいですね。ネットに慣れて居ない人へのアプローチも、もしかしたら良さげかな？ 試しにちょっと作ってみましたが、とにかく楽。これが物の３
超シンプルで高機能なMarkdownエディタの『StackEdit』がいい感じ！ | バンクーバーのうぇぶ屋
皆さんMarkdown使う機会多い人ですか？僕はぶっちゃけそんなに使用頻度が多いわけじゃないんですが、中にはMarkdownで書く事が多いって人も当然いると思います。そんな時Markdownエディタってどんなもの使っていますか？ 今日ご紹介させて頂く『StackEdit』というMarkdownエディタは、プレビュー機能や、Dropbox共有、Google Drive共有、パブリッシュ機能ナドナド… まーとにかく色々な機能がついてる割に、Markdownに慣れない僕でも直ぐ使い出すことが出来るくらいのシンプルさに惚れたので、Markdownエディタ良いのないかなぁって探している方に是非参考までにと思い共有させて頂く事にしました！ Chromeの拡張機能もありますが、アクセスするとサンプルが表示されるかと思いますので、それ見ながらちょっと軽くだけご紹介させて頂ければと思います！ StackEd
iMac／Macbook Proに入れてるアプリの中で『これだけは絶対必要だろ！』って思えた物全部！ | バンクーバーのうぇぶ屋
どうもー！！最近2011年春モデルのMacbook Proが重量的な意味で重すぎて、もうぼちぼちAirにしたいセナです。 まー、もしAir買ったらまたどうせアプリ入れ直すだろうし、必要な物だけチョイスして整理して入れたいし「あのアプリは必要だ、あのアプリは要らない」とか、たぶんそんな試行錯誤だけで1日以上を費やすかもしれない… オマケに、どうせ近い未来また新しい機種なり何なりが出て、同じ事を繰り返すことになるのは目に見えて居る… 僕、面倒くさいの大嫌いなので、これはなんとかして時間節約出来んもんかと思ったわけです。 と、いうわけで。今日は2013/08時点で「いや、これは自分的に天地がひっくり返ってもとりあえず必要でしょ。」ってアプリを全部一箇所にまとめておくことにしました。 まぁ、必要になるかはさっぱり分かりませんが、こんな記事でもとりあえず書いておけば将来の僕が「ビバ俺！」ってなってる
パララックスサイトを作る時必要だったリソースと使い方のご紹介！制限時間12時間で調べあげた情報色々！ | バンクーバーのうぇぶ屋
ちょっと遅くなりましたが皆様あけましておめでとうございます！ さて、新年一発目は先日こそっとあけおめコンテンツとして公開させて頂いた『 バンクーバーな僕ら – 新年あけましておめでとう巨大4コマ』で遊びで作ったパララックスページの作り方に関するお話です。 このパララックス漫画作る事になった時、実は こんな状況だったのでとにかく完全に時間との勝負だったんですが、日々パララックスに関する情報には目を通すようにしてたおかげ？もあって、リソース関係には困らなかったのでなんとかギリギリ間に合わせる事が出来ました。 今日はそんなリソース集としてお世話になった作者の方々への感謝の気持ちと、このパララックスサイトってどうやって動いてんの？ってご質問もあったので、折角だしまずは簡単に今回パララックスページを作った手順と作り方のサンプルを全部ご紹介させて頂ければと思います！ ぶっちゃけお客さんに出す内容でも、
ヤバイくらい簡単にプロフェッショナルなサイトが作れるStriking.lyが凄い | バンクーバーのうぇぶ屋
追記：【割引コードGET！】ヤバイくらい簡単にプロフェッショナルなサイトが作れるStrikingly.comが割引コードくれた！ | バンクーバーのうぇぶ屋 上記追記ですが、このStrikingly.comのデイビットさんと話をして、クーポンコード貰えたんでご紹介記事が上になりますー！ 以下より本記事本文 いやー、今日まで散々”簡単にサイトが作れるん時代っすよねー”的な事を色々書いてきましたが、もしかしたらこれは今までご紹介したどんな簡単WEBサイト作成サービスよりも凄いかもしれません。 超シンプル、超簡単、超楽、超綺麗。 無料版でもそのクオリティの高さにはちょっとビックリですが、有料版にすればA/Bテストにカスタムドメインまで全然オッケーとか色々ヤバイ高機能。 例えば、こんなサイト1時間も掛からず作れちゃう。簡単だけどレスポンシブ可もされてるし。使い方も説明が必要か迷うレベルで簡単。 S
2012年9月うぇぶ屋の注目記事 | バンクーバーのうぇぶ屋
9月に知った、教えて頂いたネタの色々です。こういうのは全部FacebookかTwitterでご紹介させてもらってるんですが、「あ、これは記事にしよう！いつか記事にしよう。記事にしよう・・・」と思ってこのまま放置しちゃいそうですし、最近ブログの更新滞ってた事もあって、色々ネタが溜まってしまいまいましたので、ちまちま更新するのも面倒になってきちゃった旨もあり、ここ最近知ったネタや情報を全部一気にご紹介させて頂こうと思います。 Vintage effects for your images with HTML5 | Webdesigner Depot 何やらInstagramっぽい写真の加工がHTML5とjQueryのプラグインで実装するってやつ。面白そうだったのと、どこかで使う機会ないかなと思ってメモらせて頂きました。 ↓↓試しに作ってみた https://webya.opdsgn.com/s
ドロップボックスで超簡単にサイトを公開できるSite44が凄そう！独自ドメインでの公開も可能！ | バンクーバーのうぇぶ屋
まだBeta版らしいけど、これはヤバ凄いと思ったので共有させて頂きます！ ドロップボックスからウェブサイトを公開する方法って、これまではパブリックリンクをコピーする方法が一般的だったかなと思います。dl.dropbox.com/なんちゃらーってなるリンクですね。 今回ご紹介させて頂くsite44では、ドロップボックスを使ってWEBサイトを公開することができるのはもちろん、独自ドメインでの公開も可能にしてしまうWEBサービスです！現在Beta版ということで、本公開するときにはがっつり変わるかもしれませんが、簡単にどんなものかをご紹介させて頂きます！ ステップ１：ドロップボックスと同期 ステップ２：ドロップボックスのサイトへ飛ぶので、アクセスを許可 ステップ３：ドメイン名を決める WEBサイトを作るぜボタンをクリック。 とりあえずここではwebya.site44.comという名前で作ってみまし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WEB制作者なら見ておいてほしい！今更聞けないCSS用語のボキャブラリーがひと目で分かる『CSS VOCABULARY』 | バンクーバーのうぇぶ屋
DribbbleとBehanceからフリー素材のデザインリソースを引っ張ってくる『DBF』がいい感じ！ | バンクーバーのうぇぶ屋
iMac購入後24時間内に導入したアプリ32個（+3個）と環境設定10項目！この間発狂したトラブル3回と全て紹介！ | バンクーバーのうぇぶ屋
