BLOG

季節を感じるデザイン~秋編~
投稿日:2020年9月18日

だんだんと残暑も過ぎ涼しくなってきて秋の気配を感じますね! 今回は季節を感じるデザイン~夏編~の続編の、季節を感じるデザイン~秋編~をお届けします! 秋を感じるデザインの特徴や、秋らしいデザインを作る際のポイントを紹介していきます! [toc] 秋らしいデザインとは 以前紹介した夏 ...

【迷ったらコレ!】Webデザインでよく使う定番おすすめフォント 13選(日本語9フォント欧文4フォント)
投稿日:2020年8月13日

Google Fontsのサービスなど、最近では無料で使えるフォントも増えてきました。 しかし、数もかなり多くどんなフォントを使えばいいのか迷ってしまいますよね。 今回はWebデザインの現場からよく使う定番のフォントをご紹介いたします。 [toc heading_levels="2 ...

【保存版】無料で使える!手書きイラスト素材配布サイト6選
投稿日:2020年8月3日

温かみや優しい雰囲気を出すのにおすすめなのが手書きの素材。 しかし探してみるとなかなかテイストに合わなかったり、雰囲気がイメージと違ったりと結構手間がかかるもの。 今回はそんな手書きイラスト素材を配布しているおすすめのサイトをご紹介します。 各サイトの素材を使ってアイキャッチを作っ ...

【デザイナー向け】参考&情報収集に!チェックしたいおすすめサイト7選
投稿日:2020年7月30日

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

【初心者向け】WEBサイトで使用する良い写真の選び方
投稿日:2020年7月27日

WEBサイト制作に欠かせない要素である写真… 予めクライアントが撮影された・購入した画像を頂ければ一番良いのですが、 素材サイトより写真の選定をお願いします!となって困った経験をした人、居るんじゃないでしょうか。 私も写真探しに苦労し、時間をかけてしまってたあのころを振り返って、今回は写真 ...

【ツール別比較】2020年時点におけるPhotoshop切り抜き方法まとめ
【ツール別比較】2020年時点におけるPhotoshop切り抜き方法まとめ
投稿日:2020年7月8日

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

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

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

Adobe XDで作れるデザイン・作れないデザイン(PhotoShopとの比較)
投稿日:2020年6月26日

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

スマホの傾き検知、Web制作で使える? or 使えない?
投稿日:2020年6月24日

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

【まとめ】Webフォントの使い方!完全ガイド 初級編【2020年版】
投稿日:2020年6月11日

最近、ブランディングのためにWebフォントを使用しているサイトを多く見かけますよね。 そんな中、「Webフォントってよく分からない…」「Webフォントって重いんじゃないの…?」「使いたいフォントがWebフォントにない…」と思っている方は多いのではないでしょうか? この記事では「Webフォ ...

季節を感じるデザイン~夏編~
投稿日:2020年6月9日

もう初夏の陽気でどんどんと蒸し暑くなってきました。 夏の気配を感じる中、今回は季節を感じるデザイン~夏編~ということで 夏を感じるデザインとはなにか、また夏っぽいデザインの作り方まで紹介していきます! 【目次】 夏らしさとは? 夏らしさを感じるデザインをつくるには? 配色 ...

初心者デザイナー向け!+αでもっとデザインをクオリティアップしてみよう!~ウェブデザイン編~
投稿日:2020年5月28日

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

そういうの待ってた!【Photoshop2020】アップデートで追加された便利機能まとめました。
投稿日:2020年5月22日

Web制作において、なくてはならない存在のPhotoshop。 昨年の11月に発表されたPhotoshop2020では様々な機能が追加&アップデートされました! 個人的に便利だなと思った機能7つをピックアップしてご紹介したいと思います。 目次 ぼかし(レンズ)の画質向上 新しく ...

初心者デザイナー向け!+αでもっとデザインをクオリティアップしてみよう!~バナー・アイキャッチ編~
投稿日:2020年5月21日

作っている途中に「なんだか違和感がある…」「どうしていいか分からない…」など、制作に悩みはつきもの。 新人のデザイナーさんはよく初めのお仕事としてバナーやアイキャッチを作成することが多いかもしれません。 弊社では入社して比較的すぐに大きい案件に関わる事もありますが、デザイナー志望の新 ...

新卒でWebデザイナーになる為に必要なポートフォリオの中身
新卒でWebデザイナーになる為に必要なポートフォリオの中身
投稿日:2020年5月18日

前回はポートフォリオの作り方についてまとめました。 今回は新卒でWebデザイナーを目指す人のポートフォリオにどんな中身が必要か、書いていこうと思います! 【目次】 ポートフォリオの中身 載せておきたい作品 その1.既存のWebサイトのトレース その2.既存のWebサイトのリニ ...

新卒でWebデザイナーになる為のポートフォリオの作り方
新卒でWebデザイナーになる為のポートフォリオの作り方
投稿日:2020年5月18日

就活の季節ですね、コロナの影響もありなかなか動けず悩んでいる学生さんもいるのではないでしょうか… 今回はデザイナーとして就職活動をするには必須となる、ポートフォリオについて紹介していきます。 【目次】 ポートフォリオとは ポートフォリオの種類 紙媒体ポートフォリオ ページ構成 ...

【デザイン段階でも動く?!】Adobe XDのプロトタイプで、デザインに動きをつけてみよう!
投稿日:2020年5月15日

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

【Bodymovin】コーディング苦手なデザイナーさんも、リッチなアニメーションをWebサイトで動かしてみよう!【After Effects】
投稿日:2020年5月8日

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

【テレワークにもオススメ】デザイン修正指示ツール徹底比較!【AUN・MONJI】
投稿日:2020年4月9日

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

静止画は動かせるのか!?動く写真シネマグラフ
投稿日:2020年3月4日

静止画の素材を動かしたい…動かしてほしい…そんな話を受けた人がいるのではないでしょうか?  今回は静止画を動かしたいというテーマで、静止画の一部だけ動かしたシネマグラフの紹介や 静止画を動かすため、Photoshopのタイムラインを駆使し、チャレンジしてみる内容など (比較的?)簡単に動か ...