ブログBLOG

【デザイナー向け】参考＆情報収集に！チェックしたいおすすめサイト7選

デザインのトレンドや技術は日々移り変わり進化していくものです。 特に、ウェブデザイン業界はトレンドの変化、技術やデバイス、ツール面の進化のスピードも速く日々情報収集をしていないとなかなかついていけません…。 そんな悩めるデザイナーさんへ今回はデザイナーにおススメのメディアサイトや技術情報 ...

【ツール別比較】2020年時点におけるPhotoshop切り抜き方法まとめ

デザイン業務において避けて通れない作業のひとつに画像の「切り抜き」があります。 WEBサイトやバナーの中に、素材写真から綺麗に切り抜いた製品や人物の画像が効果的に入っているとそれだけでデザインがぐっと引き立ちます。 皆さんは普段どんな方法で画像の切り抜きを行っているでしょうか。 基本的に「綺麗 ...

【2020年版】ヘッダー・メガメニュー・スマホメニューのデザイン参考まとめ

世の中には様々なウェブサイトがありますが、ほとんどのサイトで取り入れられているのがヘッダーですね。 皆さんはどのようなデザインを思い浮かべますか？ PC時のデザインであれば、「左端にロゴがあり、右端にナビゲーションとしてリンクがある」といった形を想像される方が多いのではないでしょうか。 作成する機 ...

Adobe XDで作れるデザイン・作れないデザイン（PhotoShopとの比較）

PhotoShopはデザイナーなら誰もが一度は使ったことがあるデザインツールだと思います。 webのデザイン作成をPhotoShopで行うwebデザイナーも多いですよね。 そこで皆さん、Adobe XDというデザインツールをご存じでしょうか？ 今回はXDをPhotoShopと比 ...

スマホの傾き検知、Web制作で使える？ or 使えない？

スマートフォンでアプリを使っていると、時々デバイスの傾きで画面内もお洒落に傾く事があるかと思います。 Webでも出来るかなと思い調べたところ「DeviceOrientationEvent」というものが見付かりましたので、簡単なデモを作成してみました。 今回は手軽にwebpackとBabe ...

HTMLコーディングの検証ってどこ見るの？チェックポイントとよくある不具合をまとめました

コーディングの検証は見る場所やブラウザ・端末も多く、チェックが大変ですが重要な作業です。 特にヘッダーなどの共通要素、TOPページのチェックは重要です。 確認すべきポイントは多岐にわたりますが、明文化されていないことが多い作業でもありますよね。 担当者によってチェックするポイントが違っ ...

初心者デザイナー向け！＋αでもっとデザインをクオリティアップしてみよう！～ウェブデザイン編～

前回の記事に続き、ウェブデザイン編です！ 前回のバナー・アイキャッチ編はこちら 普段何気なく見ているヘッダーやフッター、ボタンなどもデザイナーさんによってしっかりと作られているもの…。 特にコーディングを別の方が担当する場合、おや…？と思われてしまうデザインだと確認の手間などが ...

【デザイン段階でも動く？！】Adobe XDのプロトタイプで、デザインに動きをつけてみよう！

ウェブデザインを製作する際、「ページを更新した時、順番に下から出てくるアニメーションを付けて欲しい…。」など、言葉で挙動の説明は難しく、伝えるためにアニメーションをデザイナー側で用意するのも大変…。 デザイン・コーディングどちらも自分が担当できる場合であれば融通が利きますが、チームでの作業 ...

【Bodymovin】コーディング苦手なデザイナーさんも、リッチなアニメーションをWebサイトで動かしてみよう！【After Effects】

コーディングの動きの指示をする際、「このサイトのこの部分に似せて欲しい」などの具体的な指示があれば分かりやすいですが、動きを伝えるというのは難しいと思います。 また、デザイナー自身で動きが付けられるとやりとりの手間が少なくなるかと思います。 しかしJavaScriptなど、コーディングで ...

【テレワークにもオススメ】デザイン修正指示ツール徹底比較！【AUN・MONJI】

コロナウイルスの影響で、在宅勤務やテレワークスタイルになった会社も多いのではないでしょうか？ 修正指示をいつも口頭でしていた場合、依頼者・担当者に距離があるとどうしてもやりとりがしづらくなってしまいます。 PDFに手書きをして送る場合は担当者が文字を判別出来なかったり、単語のコピペ出 ...