タグ

ブックマーク / webya.opdsgn.com (12)

  • 英語学習者の強い味方、英文チェックツールの「grammarly」が超優秀でオススメ! | バンクーバーのうぇぶ屋

    もしかしたら初めてYoutube広告に釣られたかもしれないと思ったんですが、先日Youtubeをなんとなく眺めていたらgrammarlyの広告が流れていたんですね。これ自体は結構前から知っていたWEBサービスで、英文の校正サービスとしては以前からあったんですね。ただ、英文チェックまでの過程が長かった。たしか以前は、英文アップロードして、チェックして、評価して、内容確認してと、なんか色々面倒なイメージがあったんですね。実際そうだったと思うし。 なので「今さらYoutube広告打ったのかね」と一瞬思いはした物の、その広告がやたら毎回英文チェックめんどくせぇの心を擽るくらい良く出来ていたので、まんまと釣られて使ってみたという流れです。 それがまぁ、以前の原型なんてとどめて居ないくらいに進化していたので、今日はここで共有させて頂こうと思います! 凄まじく進化した英文チェック工程と精度 とりあえず、

    英語学習者の強い味方、英文チェックツールの「grammarly」が超優秀でオススメ! | バンクーバーのうぇぶ屋
  • 最近流行ってる画像のぼかし加工が簡単に作れるjQueryプラグイン『Image Blur Plugin』 | バンクーバーのうぇぶ屋

    ただのぼかし加工プラグインなら紹介するまでも無いかと思いましたが、丁度今進行中のプロジェクトでも使えるかもなと思ったくらいに丁度良かったのでご紹介。 最近はワンページデザインなんかに良く見られる背景をぼかした写真で表示するようなデザインって良く見ますよね。あれって実際作ってみると分かるんですが、ただ単にぼかせば良い感じになるかって言われると意外と難しい表現の一つだったりする。ぼかすだけであれば今やCSS3でも表現は可能ですが、微妙な調整やJS使ってカルーセルなんてしようと思うとなおのことイミフになりやすい。ブラウザ対応も面倒。 そんな時、今回ご紹介するImage Blur Pluginは、細かい調整も可能だし、様々な用途で使えそうだったので、是非覚えておくと良いかもしれません。 ぼかし画像の切り替えにも対応 Switch Header Imageの画像をクリックするとヘッダー上の背景ぼかし

    最近流行ってる画像のぼかし加工が簡単に作れるjQueryプラグイン『Image Blur Plugin』 | バンクーバーのうぇぶ屋
  • シングルページなサイトをデザインする上で、知っておいて損は無いかもしれないプラグインとか色々! | バンクーバーのうぇぶ屋

    最近多いですねー、1ページで完結するタイプのサイト。One Page Loveのサイトなんかから、シングルページの事例も大量に見ることが出来ますし、パララックスやらフリップ型のコンテンツやら、なんか色々出てきてて着いて行くのがやっとです… でも実際シングルページをつくろうとすると、え?何これどうなってんの?って物も多くてビビることもしばし。 ってことで、今日は僕が知ってる中で『お、これ、シングルページ作る時に使えるんじゃね?』って物を幾つかご紹介させて頂きます! 主にはシングルページデザインの表現の幅を広げるjQueryプラグインの紹介になるかなと思いますが、楽しい物も多いので、是非興味があれば試してみてくださいませ〜! それではいってみましょー! パララックススクローリング系プラグイン この辺は以前に紹介したことがあるものばかりなので、ぱぱーっと行きます。 jQuery Waypoint

    シングルページなサイトをデザインする上で、知っておいて損は無いかもしれないプラグインとか色々! | バンクーバーのうぇぶ屋
  • チーム間のコミュニケーションを円滑にしたい時に試してみるべきツールやWEBサービス色々 | バンクーバーのうぇぶ屋

    別にWEB屋に限らず、誰かとチームを組んで作業する時、いかにしてコミュニケーションの質を上げるかと考える人は多いと思うんですね。 かくいう僕なんかは、たかが数人のチームコミュニケーションでも相当大変な思いをしているので、これが数十人と規模が拡大した時のことを考えると憂なので、ぼちぼち対策を考えないといけないなと思うんですね。 そこで今日は、とりあえず手っ取り早くコミュニケーションの質を上げる為になんか良いツールが無いか探してみる事にしたので、ちょっと共有してみようと思います。EvernoteとかDropboxとかBasecampとかはとりあえず省いて、ここ数ヶ月の間に使い出した/知った物を中心にご紹介させて貰えればと思います! もちろん、コミュニケーションの質をあげようという考え方自体人によってまちまちでしょうし、必要なのはツールでは無く意識の問題であることが多いのは承知の上なのですが、

    チーム間のコミュニケーションを円滑にしたい時に試してみるべきツールやWEBサービス色々 | バンクーバーのうぇぶ屋
  • もうシンプルアイコン探しには困りたくない!フリーのシンプルアイコンを厳選26選! | バンクーバーのうぇぶ屋

    毎日英語圏のWEB系ブログをチェックしていると、毎週必ず何かしらのアイコン系の記事を見るんですよね。バンバン新しい物が出てきて、その度に『アイコン』のタグを付けてブックマークするわけですが、もう600記事近い程のアイコン関連のブックマークがあって意味分からない状況になってたりするわけです。 というわけで、今日はそんな僕のアイコン関連ブックマークの中から『シンプル アイコン』というタグで絞って、更にその中から「これはクオリティ高いなぁ」とか「凄い使えそうだなぁ」とか思った物だけを幾つか厳選して共有させて頂こうと思います!目についた物からご紹介させて頂くので順不同です!コレを機に少しずつ整理していこーっと。 数が数なので大変かもしれませんが、皆さんこういったフリー素材を使う時は必ずライセンスを確認するように気をつけてください。中にはサイトに明記して無くてもダウンロードファイルの中にReadme

    もうシンプルアイコン探しには困りたくない!フリーのシンプルアイコンを厳選26選! | バンクーバーのうぇぶ屋
  • 英作文に時間をかけるな!英語圏のWEB制作現場でよく使われる英語表現テンプレート集!【オフィス編】 | バンクーバーのうぇぶ屋

    例えば、カナダで郵便番号と言えば『V6E 1G6』のように、6桁の文字と数字で表現するんですが、電話で『郵便番号を教えてください。』とか言われる場面に遭遇する事はよくある。ましてや英語初心者の内は特に『V』と『B』の区別なんて付かない場合も多いですよね。 その時の話を例に取ってみます。 例えば、『V6G 2V3』を説明する場合、 V as in Victor, Six, G as in Golf, Two, V as in Victor, Three. (V6G 2V3) といった具合ですね。 オフィスで使用頻度が高い表現色々 では、続いて体感的にオフィスで使用頻度が高いなーと思うからご紹介していきます。 メールの返信が遅れた場合はシンプルに最初にこの表現です。”the”を忘れない様に。 メールの返事が遅れてすいませんでした。 Sorry for the late reply. Make

    英作文に時間をかけるな!英語圏のWEB制作現場でよく使われる英語表現テンプレート集!【オフィス編】 | バンクーバーのうぇぶ屋
  • Facebookっぽいナビゲーションをレスポンシブデザインで実装するプラグイン/チュートリアル色々 | バンクーバーのうぇぶ屋

    タイトルの通りなんですが、結構頑張って探したのでメモがてら共有! Facebookのモバイル版のあの、右にスッと出てくるナビゲーションあるじゃないっすか。今日はあのナビゲーションの実装についてのネタをシェアさせて頂きます〜! こんな奴!ボタンクリックすると横にシュッと出てくるタイプのナビゲーション、英語圏ではOff-Canvas Navigationとかって呼ばれたりすると思いますが、これをちょっと急遽実装しなきゃいけない案件に追われて、先日ガツっとどんなのあるか調べたので、良い機会だから共有兼メモ書きとして記事にさせて頂こうと思います! Sidr – A jQuery plugin for creating side menus なんか日人でも知ってる人多い印象。かなーり僕の理想に近かったので、あとは実装して問題なければコレにしようと思いました! メニューの展開はこんな感じ。 これでえ

    Facebookっぽいナビゲーションをレスポンシブデザインで実装するプラグイン/チュートリアル色々 | バンクーバーのうぇぶ屋
  • 約36時間でレスポンシブデザインを作る!効率最優先で作るため必要だったリソースや情報色々 | バンクーバーのうぇぶ屋

    先日このブログをリニューアルさせて頂いた旨をご報告させて頂きましたが、今回のリニューアルの主目的だったレスポンシブデザイン化について、とにかく効率優先で作業させて頂いた時のリソース関連や情報を一度僕自身の忘備録として抜粋してまとめさせて頂こうと思います!以前別のブログを作った時もそうですが、基僕はとにかく効率重視派です。細部に渡る美しいデザインや、ガリガリのプログラミング。標準に法ったコーディングとかはその道のスペシャリストが仲間内に居るので、今回も僕は効率化に焦点を当てています! ご紹介させて頂くのは主にFacebookやTwitter周りで共有させて頂いてきたリソースばかりですが、実際に使ってみると見えてくる注意点や、戸惑った部分、周りのデザイナーにも知っておいて欲しい部分等が見え隠れしてきたので、まずはその辺りを中心に、作業ステップ毎に簡単にご説明させて頂こうと思います。 僕と同じ

    約36時間でレスポンシブデザインを作る!効率最優先で作るため必要だったリソースや情報色々 | バンクーバーのうぇぶ屋
  • SassとCompassでSprite画像を作る

    やっべぇ、これ便利!って思ったので即共有!これまでSprite画像作る時って皆さんはどうしてましたか?僕はCSS Sprite Generatorというサイトを使って画像を生成していました! しかし、さっき見てた記事でなんと、Compassを使ってSprite画像を生成する方法が紹介されていて、今さっき試したら結構ツボにハマったので、まずはこの興奮のまま皆さんともシェアさせて貰えれば嬉しいです! 参考にさせて頂いた記事は以下なんですが、結構詳しくCompassで作るCSS Sprite画像の作り方が紹介されています。まずは僕も試してみた簡単な概要部分をちょっとご紹介させて頂きましょう!SassとCompassの基的な使い方はググって頂ければ嬉しいです>< How to automatically generate CSS sprites with Sass and Compass | C

    SassとCompassでSprite画像を作る
  • Responsive Grid Systemの仕様が変更となり、僕のレスポンシブデザインの作り方もちょっと変わりそうなので共有 | バンクーバーのうぇぶ屋

  • パララックスサイトを作る時必要だったリソースと使い方のご紹介!制限時間12時間で調べあげた情報色々! | バンクーバーのうぇぶ屋

    ちょっと遅くなりましたが皆様あけましておめでとうございます! さて、新年一発目は先日こそっとあけおめコンテンツとして公開させて頂いた『 バンクーバーな僕ら – 新年あけましておめでとう巨大4コマ』で遊びで作ったパララックスページの作り方に関するお話です。 このパララックス漫画作る事になった時、実は こんな状況だったのでとにかく完全に時間との勝負だったんですが、日々パララックスに関する情報には目を通すようにしてたおかげ?もあって、リソース関係には困らなかったのでなんとかギリギリ間に合わせる事が出来ました。 今日はそんなリソース集としてお世話になった作者の方々への感謝の気持ちと、このパララックスサイトってどうやって動いてんの?ってご質問もあったので、折角だしまずは簡単に今回パララックスページを作った手順と作り方のサンプルを全部ご紹介させて頂ければと思います! ぶっちゃけお客さんに出す内容でも、

    パララックスサイトを作る時必要だったリソースと使い方のご紹介!制限時間12時間で調べあげた情報色々! | バンクーバーのうぇぶ屋
  • アイコン作りに特化したチュートリアルの数々!とにかく真似まくった先にオリジナルを作る意識! | バンクーバーのうぇぶ屋

    世の中にあるチュートリアル見まくって、沢山の技術や表現力を得て自分自身のオリジナルへと昇華させようぜ!的な記事を以前書かせて頂いたのですが、この記事を友人にもみてもらい、感想もらったりした結果、中々具体的な作る目的が無いと、チュートリアルとか出さないのが正直な所なのかもしれませんね。「これ、作るぞ!」みたいなやる気というかそういうの。 しかし、色々な人の話しを聞いている中で、以前のチュートリアル記事の中で、アイコンを作るチュートリアルに関して多くの人からコメントを頂きました。「おぉ、アイコンつくるチュートリアルすかー」みたいな。んで、もしかしたら、アイコンという誰しも一度は作ってみようと思う物を通したチュートリアルであれば、結構楽しくスキルアップできるんじゃないかと思った訳です! アイコンであれば色々なところで必要になるし、ミニマルだろうが、ポータルだろうが、コーポレートだろうが、ECだろ

    アイコン作りに特化したチュートリアルの数々!とにかく真似まくった先にオリジナルを作る意識! | バンクーバーのうぇぶ屋
  • 1