BLOG ブログ

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

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

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

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

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

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

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

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

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

軽くて拡張機能も豊富で、日本国内でも世界でもトップシェアを誇るブラウザ・それがGoogle Chrome。 Chromeの検証ツール（ディベロッパーツール）のお世話になっているサイト制作者は多いはずです。 この記事ではサイト制作のプロであるサイト制作会社の人でも意外と知らなかった知られざ ...

ブログのアイキャッチ画像を作ろうとして、まずは構図を考えて、文字や画像を配置して、色を決めて、ジャンプ率を設定して、やっぱりここはこうして、いやこうでもない…なんて苦戦している間に数時間経っていた！　ということはありませんか。デザインに正解はないので、試行錯誤しているうちにあっという間に午後 ...

仕事中よく使うサイトや参考になるブログ記事は家で見返したいが、いちいち自分のスマホにURLを送るのは面倒！ ブラウザのブックマーク機能は物足りない！ 出来れば1つのサービスでブックマークを管理したい！ 参考サイトをまとめたブックマークを共有したい！ …というわがままな欲望を叶えてくれ ...

イラストや写真を動かして、Webサイトで見られるアニメーションといえばGIFアニメーションですよね。 ですが、近頃GIFアニメーションに代わる新しいAPNGという形式が現れました！ 今回はこのAPNGについてと簡単にアニメーションを作成の過程をご紹介したいと思います。 【目次】 ...

みなさん、HTMLメールを作成したことはありますか？ テキストだけで作ったメールよりも凝ったレイアウトにすることができ、画像を使って華やかに見せることもできるので、よりユーザーの目を引くことができますよね。 華やかなメルマガなどが送られてくると、ついつい見てしまう方も多いのではないでしょ ...

入力するだけでパパっと数値や単語を変換してくれるwebサイトや、直感的に操作出来る色の見本webサイトなど、普段業務で使用しているデザインやコーディング時に便利なサイトを集めました。 デザイン編 3:2、黄金比等を一括計算「アスペクト比計算ツール」 見ているだけでも楽しい2 ...

Adobe Creative Cloud（以下 Adobe CC）に契約しているユーザーが利用可能なサービスに、Adobe Fonts(旧名 typekit)というものがあります。 追加料金なく、全フォントを商用・個人用問わず利用可能となっております。 Futuraなど有名な欧文フォ ...

今回は余白についてデザイン初心者さんや学生さん向けにご紹介したいと思います。 皆さんは余白とどう付き合っていますか？ デザインするうえではかかせない存在の余白。なんとなく…といった感覚で使っていると違和感のあるデザインや 情報を正しく受けとってもらえないデザインになってしまいます。 ...

Webデザイナーにとって、自分のデザインがコーディングしやすいのかどうかは意外と気になるもの。 コーダー側は受け取ったデザインを粛々とコーディングするだけなので、あまり「こうしてほしい」と声を上げることはありませんが、デザイナーの観点だけでは気付きにくい問題が埋もれてしまっているか ...

Webデザインといえば、今まで「Photoshop」「Illustrator」「Sketch」といった感じでしたが、昨今の「AdobeXD」の普及により、弊社でもXDで作成されたデザインを扱う機会が増えてきました。しかし、まだまだ発展途上のXDでは痒いところに手が届かない部分が多いのも事実で ...

皆さんはAdobe Creative Cloudライブラリ、通称『CCライブラリ』は活用していますか？ AdobeCCを利用されている方、特にコンプリートプランなどであれば様々なソフトを自由に使う事が出来ます。 WEBデザイナーさんであれば、Adobe製品はPhotoshopやXD、Il ...