こんにちは、デザイナーの花ちゃんです！ アイキャッチやバナー、プレゼン資料などにも欠かせない写真素材、みなさんはどうしていますか？ もちろんできることならぜんぶ自分で用意するのに越したことはないのですが、実際に撮影用のセットを組んだり現地に行って撮影したりするのは、時間や予算の関係でなかなか難しいときもありますよね。 そんなとき、役に立つのがロイヤリティフリーの写真素材です。私は素材を組み合わせたり、合成をしたりしてフル活用しています！ でも、イメージに合う素材を見つけるのってなかなか大変で、探し始めたらあっという間に1、2時間過ぎてしまうことも……。なんとか作業時間を短縮できないか……と思い、無料で使えて、商用利用もできる素材サイトと効率的な写真の探し方をまとめてみました！ 未経験からWebデザイナーを目指すなら…… Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教え

こんにちは、デザイナーの藤田です！ 毎回、同じことを言っておりますが、技術の進化と共にWebサイトの表現も目まぐるしく変わってきておりますね。 油断をすると次々と見たことのない表現が増えていく今日この頃なので、自身の備忘録も兼ねてサイト制作に取り入れたいWebデザインのトレンドをまとめてみました！ よろしければ皆様もご覧ください。 2018年気になるWebデザイントレンド 画像を揺らす デザインにひと味足す方法として、最近よく見かけるのがシェーダーで画像を揺らす手法。 アイキャッチに対して誘目性が高まりデザインに奥行き感が出るのが良いですね！ http://www.themustafacelik.com/ http://culture.basicagency.com/ パララックス 手前のものは早く動き奥のものはゆっくりと動く視差効果をスクロールアニメーションに取り入れるこの技術は４〜５年

冬が大好き、フロントエンドエンジニアのハルです。 暑いのもうんざりしています。冬の寒さのなか、あったかい暖房の部屋でぬくぬくしたいです。 さて、今回は、Instagram APIのサンドボックスモード（開発モード）のアクセストークンの取得と、簡単な使用例を紹介したいと思います。 今回想定する使用シーンは、自分のサイトに、自分が使っているアカウントの最新投稿写真を取得したいとき。この記事では、そのために必要なアクセストークンの取得方法を中心に紹介していきます（実際に写真を取得するphpのコードはおまけ程度になります）。 今回想定しているようなシーンであれば、サンドボックスモードの範囲で行うことができます。 なお、サンドボックスモードの制限については公式のドキュメントをご覧ください。 https://www.instagram.com/developer/sandbox/ サンドボックスモード

「撮影」を本格的に学びたい方へ 撮影の基本知識を身につけたい、映像クリエイターを目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。どんなスクールがあって、どんな内容が学べて、費用はどれくらいするのか、情報として持っておいて損はないはず。下記におすすめスクールを集めてみました！ 魅力的な写真とは カメラを構えているとき、ファインダーを覗いて撮りたい画を決める瞬間があります。その瞬間の「撮影範囲」、あるいは「撮影した後にトリミングしようと思っている範囲」を決めることをフレーミングといいます。 写真が魅力的になるかどうかは、このフレーミングにかかっています。 ヨコに撮るかタテに撮るか？　アングルは上からか下からか？　など、カメラマンが自分のセンスで、被写体および背景をどのように写真に収めるのか決めていきます。 このフレーミングを行う際に、注意すべき点が1つあ

こんにちは、ぺちこです。 何か気のきいたオープニングトークをしようと思いましたが、びっくりするほど何も思いつかなかったので割愛します。 突然ですが、「あのフォントをWebフォントとして使いたい。でも、それにはライセンスの壁が・・・。」という悩ましいとき、ありますよね。 欧文フォントに関しては数も多いので代替のWebフォントを探すかと思いますが、これがまた時間がかかる。探している間に素敵なフォントに出会うこともありますが、短縮できるものはなるべく短縮したい！ というわけで、「Google Fonts」と「Font Squirrel」から有名なフォントにそっくりなフォントを探してみました。 比較するときの基準 探したとき、主に重視した部分は以下です。画像で比較しているアルファベットだけが似ていても仕方ないので、ある程度の基準を設けています。 「a」「b」「c」「d」「o」の丸み 「a」「g」の

こんにちは。フロントエンドエンジニアのほりでーです。 Webやアプリの開発ではデザイナーとエンジニアの連携が欠かせません。デザイナーとエンジニアが分業する場合、デザイナーがPhotoshopなどのグラフィックツールで完成図となるデザインカンプを作成し、それを元にフロントエンドエンジニアが実装してWebサイトを完成させることが多いでしょう。 しかし、最近のWebサイトで多用されているリキッドレイアウト（横幅の変化に追従するレイアウト）や、ユーザーの操作に反応するインタラクティブなアニメーション表現、CMSやJavaScriptと連動して動作する複雑なUIなどをカンプ上で表現するのは困難です。 そのため、デザイナーが「ここはこういう風に動かしたいな〜」と思っていても、それがエンジニアに伝わっていない、という見落しも発生してしまいます。 一般的に、ソフトウェアの開発では仕様が不安定（＝必要な機能

こんにちは。デザイナーのハルエです。 普段Webデザインを制作する上でPhotoshopを使用している方は多いかと思いますが、いかに自分に合った環境にカスタマイズするかで作業効率は大きく変わってきます。 今回はいつものPhotoshopがさらに快適になる無料プラグインをご紹介させていただきます。 【こちらもおすすめ】 おすすめPhotoshopプラグイン WebINK http://www.webink.com/webfontplugin/ ※現在このサービスはご利用いただけません。 Google Web FontなどのWebフォントをPhotoshop上で表示、利用することができます。 最初の同期に少し時間がかかりますが、あとはデザインしながら手の届くところでWebフォントがさくさく選べてしまうので、非常に捗ります。 Photoshop CS5から対応しています。 flaticon ht

こんにちは、フロントエンドエンジニアのいなばです。 最近何件かフォームのバリデーションの実装について相談される機会が続いたので、 社内勉強会の資料を作ったついでに記事にもしてみました。 今回は、大きく分けて下記2点を満たすフォームを作ってみたいと思います。 不正な入力値のとき、エラー内容がリアルタイムに表示される 各項目の入力内容により、送信ボタンの非活性化 / 活性化が切り替わる 最近では当たり前になりつつある、エラーの内容がその場で確認できて、項目のバリデーションがすべて通らないと送信ボタンが押せないフォームです。 基本方針 HTML/CSSでできることはHTML/CSSでやる HTMLでできないことをJavaScriptでカバーする HTML5からフォームのバリデーションに関する機能が拡張されたため、使えるものは使ってなるべく楽に実装することを目指します。 フォームを構成する要素 ざ

春ですね、いや、夏の匂いを感じる人もいることでしょう。 フロントエンド担当、ザワです。 今回は、フロントエンドエンジニアの私が日常的にチェックして情報を得たり、困ったちゃんの時にお世話になっている主なサイトをご紹介します。 フロントエンド系記事 CSS-TRICKS https://css-tricks.com/ CSS関連といえばこのサイトではないでしょうか。サイト名もカッコイイですし。CSSでお困りの際に検索すると、大体ヒットしてきます。CSSのTips系の記事や、最新のプロパティに関する記事などが掲載されるので、フロントエンドならマストでチェックしておきたいサイトです。 HTML5Experts.jp https://html5experts.jp/ Web技術に関する最新動向、エキスパートによる見解などが見所のメディアサイトです。最新の技術に関してプロ中のプロ、いわゆるロープーの人

どうもですよ、はやちですよ( ˇωˇ) 今回はsvgのアニメーションの操作がカンタンにできるSnap.svgをご紹介致します( ˘ω˘)☞三☞ｼｭｯｼｭｯ 導入方法 さっそく、導入からご紹介いたします。まず、こちらのサイト（↓）からダウンロードします。 snap.svg ダウンロードしたら、snap.svg-min.jsを読み込みます。 <script src="snap.svg-min.js"></script> タスクランナーでのご使用の方 npmでも公開されています。 https://www.npmjs.com/package/snapsvg npm install snapsvg　でインストールまたは bower install snap.svg　でインストールします。 使用するjsに読み込ませたら準備完了です( ˇωˇ)☝ import snapsvg from 'snapsvg

こんにちは、デザイナーの藤田です。気候が暖かくなってきたせいなのか、最近ペットとして飼っている猫が私の近くに寄り沿って来なくなり、猫肌恋しい今日この頃です。 さて、今回はスペースを十分に使用することで、ユーザビリティを向上させ、同時に私の心の隙間までも綺麗に埋めてくれる「メガメニュー」を使用したサイトをまとめてみました。 ここ数年、目にする機会が増えた一方で、いざ自身でメガメニューのデザインを行おうと思うと、それらをまとめた参考サイト（特に国内サイト）が極端に少なくて困った、なんて経験をお持ちの方も多いのではないでしょうか？ かく言う私もその一人で、自身の備忘録も兼ね、国内サイトで「メガメニュー」を使用したサイトをまとめてみました。 独学でつまずいていませんか？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめ

イヤフォンを新調した初日にネコに噛みちぎられたフロントエンドエンジニア、ザワです。こんにちは。 今回はWebクリエイターのポートフォリオサイトに注目し、筆者の鳥肌が立った、心が躍ったサイトを集めてみました。この記事を読み終わった直後には、あなたも制作意欲が湧いていることを期待しています。 WebGLを使用し、実験的な手法を用いた作品を集めたショーケースです。Chrome Experimentsに載っている作品、A-I-U-E-O、などもあり、ひとつひとつのスケッチのクオリティが激高です。このサイトをスケッチブックとしてとらえると、子供が無邪気に絵を描きなぐる様子が浮かんできます。好きこそものの上手なれ。私はそうこのサイトから教えられました。 鮮やかな技術に惚れる「Takumi Hasegawa」 https://tkmh.me/ なんですかね。惚れちゃいますよね。こんな綺麗な配色でグリグリ

こんにちは、エディターのヒロアキ（htanaka0725）です。 Web メディアに携わる者として向き合う必要がある「動画」。いろんな場所へ赴くライターやエディターは、その取材現場で繰り広げられている模様を「ムービー」という目線で見てコンテンツ化する、という能力が必須となりつつあります。 とはいえ、「動画を撮影する」「動画を編集する」というのは記事の執筆や編集とは異なる分野なうえ、覚えることも真新しいもの。取り組むにしても気持ちの準備が欲しいですよね。 そこで、「これだけやれればだいじょうぶ！」という Web コンテンツとして十分なクオリティの作品を手がけるための動画の撮影方法と編集手法をまとめてみました。 個人アカウントで再生回数 5 万回オーバーの動画 バイク専門のジャーナリストとして個人アカウントで何本か動画を手がけ、多いものだと再生回数が 3 万回を超えるのもチラホラできました。稼

寒い。。寒いよ。。。毛布。。欲しいよ。。。そんな感じのディレクター、鮫島です。 気づけばもう完全なる冬ですね。冬のときは夏が恋しいのに、夏のときは冬が恋しくならないのってなんでですかね。 さて2013年の12月に「学生に届け！キャッチコピーが心に響く、2015年度新卒採用サイト超まとめ」という記事を公開したのですが、思いのほか反響が良く、「よし、毎年書こう」と神に誓った気がするので、今年も2016年度版として各企業の新卒採用サイト超まとめを頑張って書きたいと思います！ ちなみに、新卒エントリーが2015年3月から開始と、時期が大きく変動したので、【新卒採用】と銘打っているところもあれば、【インターン採用】と言葉を変え、学生に向けたメッセージを届けているみたいです。 なので、今回ご紹介するまとめには【新卒採用】と【インターン採用】が混ざっていること、予めご了承くださいm(__)m それではい

どうもお久しぶりです。 フロントエンドエンジニアのはやちです( ˘ω˘)✌ 最近『天空のクラフトフリート』というソーシャルゲームにハマっております。 もともとは弊社のエンジニアの何人かに誘われてDLしたのですが、みなさん最近ログインしている様子がなく、もくもくとひとりでミッションをこなし、練り上げております( ∵ ) まけないひとりたのしい、強くなる✌(´ʘ‿ʘ｀)✌ さて、今回はSVGで絵を描いているようにアニメーションを生成してくれるサイト、LAZY LINE PAINTERの使用方法をご紹介します。 SVGとは Scallable Vecter Graphocs（スケーラブル・ベクター・グラフィックス）の略で、XMLをベースとした二次元ベクターイメージの画像形式のことです( ˘ω˘)☝ SVGはjpgの様にimg要素で扱ったり、cssで色を変えたり背景画像として扱ったりできます( ˘

こんにちは。デザイナーのハルエです。 最近の流行は「トシムリン」です。あぁ次こそ生で見たい・・・。 CSS3でアニメーションを作成するとコードが肥大化して複雑になるため、ライブラリやオンラインツールを使用して作成している方も多いと思います。 簡単なアニメーションで言えば、「transition」でボタンのマウスオーバーに背景色をアニメーションさせたり、画像をフェードさせたり拡大・縮小させたり・・・などなど。 「animation」を使えばさらにできることが広がるのですが、まだまだwebkitブラウザ以外では正常に動作しないのが難点です。 今回は、CSS3アニメーションを一瞬で設定できちゃうオンラインツールをまとめて紹介します。もう知っている人もたくさんいるとは思いますが、まだ使ったことのない方はぜひ一度試してみてください。 CSS3アニメーションを実装！オンラインツール7選 Animate

こんにちは、まきこです。 アンジュルムの佐々木莉佳子ちゃんがとてもかわいいので、毎日がだいたい楽しいです！ さて、みなさんは、サイトの背景色ってどれくらい気にしていますか？ わたしは、なんとなく白を選んで置きにいってしまうことが多いんですよね……。でも、もっと幅広い表現のために、背景色の使い方の引き出しを広げたいなーと最近は考えています。そこで今回は、背景色の使い方が印象的なサイトを、使い方ごとに分類してご紹介します！ 強めの色を大胆に使う 1. heyblend http://www.heyblend.com/ アメリカのクリエイティブ集団のサイト。 背景色に赤を大胆に取りいれていて、かっこいいですよね！ 赤といっても少し白が混ざったような色で、大人っぽいスタイリッシュな雰囲気にまとまっています。下層ページも潔く赤いんですが、写真とぶつかることなく、うるさくないのにしっかり個性的。こうい

こんにちはデザイナーの藤田です。 今年最初のブログは、去年からじわじわ流行しだして、2017年WEBデザインのトレンドとなりそうな、スクリーンサイズにフィットさせたレイアウトのサイトをまとめてみました。 1. Garden Eight 参考：https://garden-eight.com/ 社名を「LETTERS」から「Garden Eight」とあらため活動を再開しましたね！ サイトの初見のインパクトが「LETTERS」時代よりパワーアップした印象を受けました。「オシャレ」さと「クレイジー」さのバランス感に脱帽です。 2. gymnast colon （ジムナストコロン） 参考：http://www.kabu-kitamura.com/colon/ 「人は夜中に30回寝返りをするから良い枕を使いましょう」というメッセージを極限までにおしゃれにして伝えております。どうやったら、こんなアイ

現在「境界線を調整」はphotoshopCC2017では名前を改め「選択とマスク」という機能としてパワーアップしております。（photoshopCC2015.5から名称変更） しかし、僕は最近photoshopCCを2015→2017にバージョンアップしましたが、この名前変更に気づかず「あれ？「境界線を調整」はどこいったの？ あんなに便利なツールなくなるはずないのに……」と戸惑ってしまいました。 今回は自分と同じように混乱してしまった方や「選択とマスク」「境界線を調整」をそもそも知らなかった方のために改めて「選択とマスク」の使い方をご紹介します。 ※この記事は、2017年に公開されたものです。最新のPhotoshopを使った切り抜きの方法については、以下の記事をご覧ください。 「選択とマスク」を使って髪の毛を切り抜く方法 今回はふわふわヘアのかわいい子供の写真をご用意しました。 できるかぎ

こんにちは、デザイナーのトミーです。 2016年を振り返ってみて、画面設計がこれまでページ単位（縦長）なのに対して、モニターにfitする画面のサイトも増えてきました。1画面ごとに説明する、アプリケーションのような構成のサイトは今後も増えてきそうです。そこで、参考になる画面やサイト設計をまとめてみました! 1. 全画面にfitするコンテンツ 参考サイト：reword™ 参考サイトでは、コンテンツをスクロールすると画面にコンテンツがfitしています。縦長のサイトよりも、各セクションごとにコンテンツが配置されているので、初見のユーザーにとってとても内容が入ってくるのではないでしょうか。全画面にfitするコンテンツをfitscreenと呼んでいます。全画面に対してデザインできるので、モニターサイズが異なっていても見た目の差異が出にくいのも特徴です。しかし、コンテンツの情報量が少ない場合にのみ有効な