BLOG ブログ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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