ブログBLOG

【Figma】セクション・フレーム・グループの違いをまとめてみた

日本語版も登場し、ブラウザベースのインターフェース・デザインツールとして大人気のFigma。 WebデザインツールといえばPhotoshopを長年使用してきた筆者にとって、 FigmaはAdobe XDよりも理解しやすいインターフェイスなので とても重宝しています。 なにより無料 ...

Web制作現場でよく見るスペルミス・読み間違いの多い英単語

Webサイトを制作するときに英単語のスペルミス・読み間違いをしてしまったことがあると思います。 制作途中で気づければまだよいですが、公開するまで誰も気が付かないと後からの修正が必要になってしまいます。 手間も追加の費用も掛かってしまうので、なるべくそれは避けたいですよね… どういっ ...

WebデザインにおけるUIについて徹底解説！

デザインに関する仕事をしていると必ず耳にする「UI」 今回はWebデザインに関するUIにフォーカスして解説します。 駆け出しのデザイナーさんにも是非見て頂きたい内容です！ それではどうぞ！ UIとは UIはUser Interface（ユーザーインターフェース）の略です。 ...

カード型UIの参考とデザインのポイントまとめ

カード型UIは、様々な異なる情報の集まりをカードのように整列させて 分かりやすく見せてくれるだけでなく、 見た目も美しくユーザーの目を楽しませてくれる優秀なUIです。 本記事では、カード型UIのメリットや、 デザインする上でのポイントをまとめてみました。 なんとなく使っていた…という方や、 ...

テイスト別バナーまとめとデザインのポイント【見本つき】

お店の看板のような役割を持つ、Web広告において必要不可欠となっているバナー。 新商品の紹介ページやキャンペーンページへの誘導の役割をするバナーには 『クリックしたくなるデザイン』が求められます。 バナー広告は、クリックしてくれる人物は誰なのか、どのような志向の人なのかを きちんと定義し、デザ ...

【パターン別】写真レタッチの方法まとめ【Photoshop】

写真を撮るとき、カメラの設定や撮影条件によっては良い写真を撮影することができない場合があります。 写真の色味が実際の色と異なって見えてしまったり、角度によって顔がむくんで見えてしまったりと要因は様々です。 そこで写真をより魅力的にするためには、レタッチが欠かせません。 レタッチは、写真を後から編 ...

検索窓の作成におけるベストプラクティス（SBO）について【参考デザイン・コードサンプルもご紹介！】

サイトに検索窓は設置していますか？ 検索窓というのは、サイト検索の入力欄のことです。 商品を探したいECサイトや、記事がたくさん投稿されているサイト、Twitter（X）やYouTubeなどのメディア系のサイトでは、検索機能は必須ですよね。 そこで今回の記事では、使いやすく素敵な検索窓を作成する ...

【保存版】無料で使える！手書きイラストのフリー素材配布サイト16選

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

モーダルウィンドウのおすすめデザインや実装方法をご紹介（デモサンプル付き）

今回のブログでは皆さんにモーダルウィンドウのデザインのポイントや実装方法などを解説いたします。 モーダルが表示されている間は他の操作をすることができないため、しっかりとポイントを押さえないとユーザーに嫌われてしまう可能性もあります。 実際のサイトでの使用例も挙げながらポイントを解説していきま ...

【簡単比較！】Premiere Pro と Premiere Rush どちらがおすすめ？

Adobeには動画編集ができるソフトがAfter EffectやPremiere Pro、Premiere Rushなど複数あります。 その中でも、撮影した動画を編集するのに長けているソフトはPremiere ProとPremiere Rushの二つになります。 しかしこの二つは使用感が似ている ...