マガジンのカバー画像

DESIGNER Tips

30
Web制作会社「エムハンド」がWeb制作の現場で役立つデザイナーのTipsを発信していきます。https://note.com/mhand_note/
運営しているクリエイター

記事一覧

固定された記事

【Webデザイナー必見】下層メインビジュアルの目的別デザインまとめ

下層ページのMVデザインにはいくつかパターンが存在します。例えば、イメージ訴求が目的のブランディングサイトであればタイトルに大きな写真を配置したり、情報伝達を重視しているのであれば、ページタイトルの高さを抑えて、ユーザーがすぐに情報をキャッチできるようにしたりと、サイトの目的や与えたい印象によってパターンは異なります。今回は下層ページのMVデザインに焦点を当てて、どのようにして伝えたいのかを、目的別に分類をして参考になるサイトを集めてみました。 ・・・ 01. 写真を引き

第2回 PhotoshopのAI生成機能「Generative Fill」を使う

こちらの記事では、PhotoshopのAI生成機能「Generative Fill」についてご紹介しています。 『第1回 PhotoshopのAI生成機能「Generative Fill」を使う』の記事もぜひ、合わせてご覧ください。 第1回の記事では、主に「オブジェクトの生成」と「背景の生成」を、今回の記事では「画像の拡張」と「オブジェクトの削除」をご紹介しております。 ・・・ はじめにPhotoshopを最新版にアップデート 『第1回』でもご説明していますが、Phot

クライアントの強みを理解する「ヒアリング」のコツ

こんにちは、エムハンドWebディレクターのyokoです。弊社には営業が存在せず、ディレクターが窓口となってクライアント対応を行い、企画から制作進行、公開まで責任を持って対応しております。 成果の出るWebサイトを作るためには、サイトの幹となる「企画・戦略」が重要です。そして、よい企画を作る上では、クライアントの本質的な魅力や課題を適切に引き出すヒアリングが欠かせません。今回の記事では、私の前職での経験もふまえ、クライアントの強みを理解するヒアリングのコツを紹介いたします。

第1回 PhotoshopのAI生成機能「Generative Fill」を使う

風景写真に写り込んだ不要な人物や物体を消したり、背景を合成して伸ばしてみたり、そういったAI機能をアピールするアプリやソフトのCMをよく見聞きするようになりましたね。 Photoshopにも、AI機能を使って選択したエリアに、指示(プロンプト)として入力したものを自然に生成したり、合成してくれるAI生成機能「Generative Fill」があります。 今回はその中の「生成塗りつぶし機能」の「オブジェクトの生成」と「背景の生成」について、検証を交え、ご紹介していきます。

チェックバックの「Before・After」

・・・ はじめに 新卒でエムハンドに入社し、デザイン歴8年の徳谷です!弊社では、デザインの品質を担保するため、組織全体でフィードバックをする文化と仕組みのブラッシュアップを続けております。私はトップデザインを担当しており、予算を基に算出された工数内で、デザインの品質向上に向けた取り組みを行っています。今回の記事では、チェックバックの「Before・After」に焦点を当て、デザイナーの視点から改善の過程をご紹介します。 01. 自己紹介まず簡単に自己紹介をさせていただき

ディレクターの新人研修について

・・・ こんにちは、エムハンドの山手(@mhand_yamate)です。 弊社では通年でWebディレクターを積極的に採用しており、入社後の新人研修プログラムの強化を継続的に行っております。今回の記事は、その新人研修プログラムの内容をまとめた記事です。今後、エムハンドのWebディレクター求人に応募してみようかなと、ご検討中の方に「入社後は安心の研修の仕組みがある」と思っていただければ幸いです。 まずはじめに今まで20年試行錯誤を繰り返しました。創業当時は研修なんて概念がなか

『Webデザインの引き出し』 エムハンド制作のイラストサイト10選

弊社では、イラストを効果的に取り入れたWebサイト制作も行っています。 イラストを使用することで、伝えたい内容や、与えたい印象をダイレクトに表現することができ、抽象的なイメージもカタチにすることが可能です。 今回は、弊社で制作したイラストサイトを、ポイントと共に10選ご紹介いたします! ・・・ 01. 社会保険労務士法人しろくまパートナーズ 02. 弁理士法人志賀国際特許事務所 03. つきあかり法律事務所 04. 株式会社クリエイティブヒーローズ 05. 株式

『デザインの引き出し』エムハンド制作のロゴデザインまとめ10選

弊社では、Webサイト制作と合わせて、サービスや企業様のロゴ制作も対応可能です。丁寧なヒアリングから確かなコンセプトを設定し、共に制作するWebサイトとも親和性の高いロゴデザインを提案いたします。 今回は、弊社で制作したロゴデザインをコンセプトと共に10種ご紹介いたします! ・・・ 01. デジマール株式会社 02. 株式会社ブルーポート 03. Light CASB for Box|丸紅ITソリューションズ 04. TQ-BUDDY - 協力会社求人サイト 0

『デザインの引き出し』エムハンド制作のDTPまとめ10選

はじめに DTP(Desk Top Publishing)は、パソコンを使用してデザインやレイアウトを行い、そのデータを印刷機で出力することを指します。主に書籍、パンフレット、チラシ、名刺などの紙媒体への印刷物を作成するために利用されています。 DTPを使うと、Webサイトとは異なり、手に触れることができる印刷物が生み出されます。これによって、印刷時の加工や紙の質感を活かし、画面上では表現しきれないようなイメージを伝えることが可能になります。 弊社では、Webサイト制作

『Webデザイナー必見』 作業効率・生産性が上がる便利ツール集

作業効率アップにつながる、Web制作で使えるツールをご紹介いたします。今回ご紹介するのは、全てWeb上で利用できるオンラインツールですので、アクセスしたらすぐ活用できます。ぜひお試しください。 ・・・ 01. ジャンプ率を確認するType Scale ベースとなるフォントサイズを入力すると、様々なジャンプ率で見出しのフォントサイズを算出してプレビューできるWebツール。フォントサイズの展開で迷う時間を短縮でき、一貫性や階層性を出すことができます。 02. コンテンツの

『入門Photoshopテクニック』 アセット機能で画像作成を効率化する方法

今回はPhotoshopの画像アセット機能についてをご紹介いたします。既に活用している人が多いかと思いますが、実はアセット名の付け方によって、さまざまな書き出し形式にカスタムすることが可能です。Web制作で便利な書き出し方法をご紹介いたします。 ・・・ 01. そもそも画像アセット機能とは?「ファイル」→「生成」から「画像アセット」にチェックを入れ、書き出したい画像名の末尾に拡張子(.jpg、.pngなど)をつけて保存すると画像を自動で生成してくれる機能です。 一度設定

『Webデザインの引き出し』 エムハンド制作のランディングページ20選

ランディングページ(LP)とは、検索結果や広告などを経由して訪問者が最初にアクセスするページのことです。商品やサービスに特化したWebページのことを指し、リスティング広告やバナー広告などをクリックした際のリンク先でよく見られます。 また、ランディングページでは情報が1ページに集約されているのが大きなメリットです。ユーザーは画面を縦にスクロールするだけでページ上の情報をすべて取得できます。お問い合わせや注文といった狙ったアクションにユーザーを直接結びつけることに特化しています

『Webデザインの引き出し』 エムハンド制作のリクルートサイト15選

弊社はこれまで多数のリクルートサイトを手掛け、その業種・業態は多岐に渡ります。リクルート市場は少子化による人材不足の影響で、戦略的なリクルートサイトが重要視され、企業らしさを視覚的に表現することや、新しい見せ方が求められていると考えられます。弊社は、企業のリアルな情報分析や、課題に合わせたコンテンツを企画することでこの期待に応えてきました。今回の記事では、弊社が制作した多種多様なリクルートサイトを15サイト厳選してご紹介いたします! ・・・ 01. 三井住友海上火災保険株

『Webデザインの引き出し』 もう迷わない タイプ別ナビゲーションまとめ

サイトナビゲーションの重要な役割は、ユーザーが欲しい目的の情報へ辿り着くためのサポートです。ユーザーはホームページに訪れた時点で「何か」を探しています。それは企業情報や商品情報かもしれませんし、お問い合わせに関する情報かもしれません。サイトに合った並び順やナビゲーションを選択し、ユーザーに優しいサイトを目指しましょう。 ・・・ 01. 並び順例えば、欲しい情報が漠然としていたり、なんとなく面白そうという閲覧動機だったり、どんな情報があるのかじっくり探したいユーザーはまずは