Web･IT･AI･デジタル･テクノロジー･通信関連 サービス･アプリ･ツール 病院･クリニック･歯医者･医療･薬 学校･教育･幼稚園･保育園･スクール 金融･投資･保険･士業 カフェ･飲食店･食品製造 料理･食べ物･飲み物 建築･建設･不動産･家･庭 商業施設･レジャー施設･文化施設 スタジオ･レンタルスペース･シェアオフィス 暮らし･インフラ･工業･メーカー 車･乗り物･モビリティ 生活･雑貨･おもちゃ･文具･家具 家電･生活用品 制作会社･開発･企画･マーケティング･コンサル デザイン･ものづくり･撮影 本･出版 求人･マッチング･転職･人材ビジネス ホテル･旅館 旅行･観光･遊び 体験･交流 イベント･お祭り 健康･運動･スポーツ･ジム 美容室･サロン･エステ･ヨガ 美容･化粧品･コスメ･ケア用品 ファッション･アクセサリー･ジュエリー ベビー･子供･キッズ･ママ 福祉･介護･お年

デザインとコーディングが分業制の企業は最近多くなってきたと思います。分業制の場合、デザインがFixして、次にフロントエンド作業、実装チェックという工程で進行します。 この実装チェックまでに期間が空いてしまったり、自分が作ってないデザインだと、チェックしにくいなと思うこともしばしばあります。そんな憂うべき実装チェックの際に、よく使う便利なChromeの拡張機能をご紹介します。 perfect pixel まず、chromeの拡張機能をインストールしましょう。 下準備 まず、デザインカンプを書き出します。Retinaディスプレイ用に、2倍サイズで書き出します。今回は、本記事用にダミーのカンプ画像を用意してみました。Perfect Pixelを使って、検証してみましょう。 レイヤーを追加 まず、検証したいページを開きます。今回はこのページを使いました。 右上にPerfect Pixelのメニュー

以下のような、よくあるカード型のコーディングは、簡単なようで実はとても奥が深いです。 ただ単純にデザインの見た目を再現しただけでは不十分で、 いかに“動的”になったときのことを考えてコーディングできているか、がポイントです。 今回はこの、簡単なデザインをコーディングする際に注意すべきポイントを５つまとめたので今後の参考にしてください。 それでは見ていきましょう！

2021年12月27日 Webサイト制作, Webデザイン HTML/CSSのコーディングの練習をするときに、既存のWebサイトの模写をする方もいらっしゃるかと思います。模写は模写で勉強になる点もありますが、実務ではデザインカンプと呼ばれるデータファイルを渡され、それを仕様にそってHTML/CSSでコーディングしていきます。実務に近いかたちに慣れるためにも、デザインカンプからのコーディングの練習をしていきましょう！ ↑私が10年以上利用している会計ソフト！ Codestep Codestepは作って学ぶコーディング学習サイト。HTML、CSS、JavaScriptの基礎学習を終えた方が、模写コーディングやデザインカンプからのコーディング練習を通して、より実践的なWebサイト制作のスキルを身につけるための学習サイトです。HTML/CSSだけではなく、WordPress用の教材もあります。 コ

こんにちは。404DESIGNERS代表の山本拓弥[@kindai_designer]です。 これからデザイナーを目指そうとしている人にちょっとでも参考になれば、現デザイナーの人の共感を得たくてnoteをやってます。 皆さんは日本と海外のデザインの違いについてよく考えたことがあるでしょうか？日本はデザイン後進国とか言われてたりしますが、自分としての意見は「日本なりのデザインが育ってきている」と思っています。一昔前はチラシのようなwebデザインがメジャーでしたが、すっきりとした印象のwebデザインも増えてきており、海外とのデザインの差の話も活発にされるようになりました。 今回はそんなwebデザインについてのお話で、日本と海外のwebデザインを比べてみました！有名企業はどのように日本と海外のアプローチを変えているのか是非知ってみてください！ 1. McDonald’s マクドナルドジャパン[h

Responsive HTML Website Templates Web design and responsive site prototyping, including eCommerce, have changed recently. The builder uses an HTML ecommerce website template for a simple landing page as a complete or fully responsive website became spread and popular. A landing page usually comes as a template demo supplied by free CSS templates or free CSS website, allowing to catch visitor's int

この記事では、これから2021年に注目したいWebデザインの人気トレンド9個をピックアップしています。 2021年のウェブデザインの傾向としては、どれも共通のテーマがあるように見えます。ハイテクなファンタジー感を目指すのではなく、よりリアルさを求めた新しいジャンルに世界中のウェブデザイナーが注目し始めています。 2021年のWebデザインは、これまでにないほどデジタルと日常を融合する方向に向かっており、普段の生活においてWebサイトが不可欠になってきていることを、反映しているのかもしれません。 よりクリエイティブなデザインを表現できるテクニックを、たくさんのデザイン事例と一緒にご紹介です。 コンテンツ目次 1. パララックス・アニメーション 2. ニューモーフィズム 3. アブストラクト・アート 4. 目にやさしい配色 5. 原因のためのウェブサイト 6. スクロール遷移 7. プロダクト

「即戦力レベルのwebデザイナーが最低限持っている知識を1カ月で身に付ける」ということを目的としたドリルを作りましたので、皆様に公開します。 ダウンロード[PDF/PSD/XD]（92MB） 本ドリルは、約140ページの参考書兼問題集になっています。まずは出題される問題を解き、その上で解説を読んで理解し、再度問題を解きなおすのが基本的な流れです。 内容は、私たちが未経験デザイナーの採用を進める中で、「こういう知識は早い段階で身に付けておいてほしいよね」という知識をまとめました。また演習用のPSD/XDファイルもドリルに含まれています。 身に付くのはあくまで「即戦力クラスの知識」であって、「即戦力」になれるわけではありません。デザインには、非言語・非定型なスキル領域も多々あるため、座学だけで即戦力にはなりません。しかしそれでも、ベースとなる知識は絶対に必要ですし、それを指南する参考書は、的を

webやアプリのUIデザイン上達のコツとして、模写（コピー）がよく取り上げられます。私も過去に一時期やったことがありましたが、確かにいくつかのデザインを細かく観察して自分で再現してみることで、その後いざ実践！となった時に多くの学びを活かせたと記憶しています。 そうした経験から、最近も会社の若いメンバーに模写を進めて実践してもらっていたのですが、とあるメンバーから「模写はできたものの、どんなところを観察すればよいのでしょうか？」という質問を受けました。確かに、実践経験が少ない人にとっては、真似てはみたもののそこから何を学べばよいか分からない、というのは当たり前かもしれません。 模写というと変わったレイアウトや表現ばかりにとらわれがちなのですが、本当に身に付けたいのは「使えるwebサイト」を作る上でのデザイン力の基礎部分です。その基礎とは何か？を知ると学習の効率も上がります。そんなわけで今回は

スマホでボタンをどこに配置するとユーザーは操作がしやすいのか？ 上部と下部、水平に並べたボタン、垂直に並べたボタン、3つ以上のボタンなど、ボタン配置について包括的な分析を行い、ボタンをどのように配置するのが最適なのか解説した記事を紹介します。 The Optimal Placement for Mobile Call to Action Buttons by UX Movement 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに グーテンベルクの原則 上部と下部のボタン 水平に並んだボタン 垂直に並んだボタン 水平と垂直のハイブリッド スティッキーボタン まとめ はじめに ボタンをどこに配置するかによって、ユーザーがタスクを完了する時間に影響を与えることを知っていますか？ タスクを素早く完了することで、より満足のいくエ

初めまして、ameko(@tk04amedama)と申します。 普段は都内の制作会社でWEBデザイナーをしています。 と言ってもまだまだ新米なので、日々勉強中です。 その勉強の一環で、最近のWebサイトで使われている メインビジュアルの構図を一覧にしてまとめた画像をTwitterに投稿してみたところ、思いがけず多くの方に反応いただけたので、その後に行っていた構図ごとの分類分けや分析も公開してみようと思い、初めてnoteに投稿してみました。 はじめに集めたサイトの数は全部で７０個。自分の仕事の参考のために集めたものなのでほとんどがBtoB向けサイトです。（BtoC向けサイトだと、この構図一覧もまた、全然違うものになりそうだなと思う。） 構図の名前は、なんとなく自分なりに語呂がいい名前をつけているだけなので、あまり突っ込まずふんわり流していただけると幸いです。（もしこの構図の正式名称とかあった

PC向けウェブサイトではごくあたりまえに使われている便利なユーザーインタフェースが、スマートフォンで閲覧時に思わぬストレスを生んでいる可能性があります。 本日はEFOにも関係のありそうな６つの定番UIを、モバイルでのユーザビリティの観点から検証していきます。 要注意UIその1：モーダルウィンドウ 要注意UIその2：折りたたみ表示 要注意UIその3：ページTOPへのスクロール 要注意UIその4：固定表示 要注意UIその5：画面内のスクロール 要注意UIその6：別窓表示 要注意UIその1：モーダルウィンドウ モーダルウィンドウとは、画面上にを浮かび上がるように表示する子ウィンドウのことで、一般には画面がグレー（またはホワイト）アウトし、その上にコンテンツが重ねあわさるようなユーザーインターフェース（オーバーレイ表示といいます）となっています。 一度開いたダイアログボックスをユーザーが閉じるまで

ページを読み進めるほどにユーザーは疲れていきます。ユーザーの集中力を回復するとっておきの方法を教えます。 Webに関わっている人なら、ユーザーがコンテンツを一字一句読んでいないと知っているでしょう。スーパーマーケットの売り場に並ぶ食品のラベルを次々にながめるのと同じで、ユーザーはWebサイトのコンテンツを無意識に読み流しているのです。 なぜ読み流すのか なぜ読み流すのか。理由は簡単で「楽だから」です。「ざっと目を通して」注意を引く部分があれば、「じっくりと考え」ます。重要な部分だけ集中して読むのです。 スーパーマーケットで、50種類のパスタソースがあっても、すべてのラベルを注意深く読みませんよね。ところが、パスタソースのビンを手に取って原材料を確認するときには、「じっくり考える」スイッチが入り、頭脳のエネルギーを消費します。 「フォーカスポイント」の導入 こうした頭脳エネルギーをゲームにな

ZoltánはCentralway（チューリッヒのソフトウェア企業）のUXデザイナー長。元UstreamのUXディレクター。美しく、且つ使えるプロダクトを作ることに情熱を燃やしています。 90年代半ばはまだユーザーはスクロールすることに慣れていませんでしたが、昨今ではスクロールはとても自然なアクションです。記事やチュートリアルのように一続きで長ったらしいコンテンツの場合は、スクリーンやページを分けてしまうよりスクロールの方がはるかに高いユーザビリティを生み出します。 ホームページのトップや、ファーストビューにすべての情報を詰め込む必要はありません。そしてユーザーを確実にスクロールさせるためには、デザインの一定の鉄則に従ってユーザーが興味を持つようなコンテンツを提供しなければなりません。そうは言っても、ファーストビューの情報はやはり最も目立つものであり、ページに価値があるかどうかをユーザーが

こんにちは、デザイナーのモモコです。 スマートフォンの普及率は2021年時点で80%*を超えており（総務省「情報通信白書令和３年度版」）、今やスマートフォンに対応したWebサイト制作は必須と言えます。 そこで今回は、スマートフォンサイトをデザインする際に参考になるギャラリーサイトや、スマートフォンサイトをデザインするときの注意点を紹介します。 海外のトレンドや人気のあるサイトをまとめてチェックできるので、ぜひ最後までご覧ください。 デザインの世界に飛び込んでみませんか？ 「プロから学びたい」、「クリエイティブな仕事がしたい」……という方は「スクールでの勉強」もおすすめです。 LIGが運営するWebクリエイタースクール「デジタルハリウッドSTUDIO by LIG」では、未経験から6ヶ月でWebデザイナーを目指せます。現役Webデザイナーによる授業と豊富な就職支援が特徴！ ぜひ一度詳細をチェ

近年何かと目にするUI / UXデザイナー・デザインという名称。これは今までのデザインと一体何が違うの？と思われている方も多いのではないでしょうか？今回は、色々な”デザイン”に関する違いのトピックを、旧来のグラフィックデザインからハイテク関連のデザインまで、様々な経験を積んでいる クリスティーン・マジー(Christine Maggi) 氏の動画からご紹介したいと思います。※翻訳・記事掲載は許諾を得ています。(Thank you, Christine Maggi – Design Gal !!) 以下翻訳内容です。 みなさん、こんにちは。Design Galのクリスティーン・マジーです。この動画とチャンネルをチェックしていただきありがとうございます。 今日は伝統的なグラフィックデザインとの違いと、ハイテク用語について話したいと思います。現在、UIデザイン・UXデザイン・プロダクトデザイン・

Windowsユーザーの方に朗報です！ Windows 7, 8, 10で、Sketchのファイルを開くことができ、編集も保存もでき、CSSの書き出し、SVGやPNGのエクスポートもできてしまう無料アプリが登場しました。 もちろん、日本語のWindows環境でも利用できます。 Lunacy, Sketch for Windows 前回紹介した時はファイルを開くだけの機能でしたが、ついに編集・保存にも対応し、Sketchの機能の80%を備えました！ Windows版のSketchといっても過言ではないでしょう。 Lunacyの特徴 Lunacyのダウンロード・インストール Lunacyの使い方 Lunacyの特徴 Lunacyは、.sketchファイルを開き、編集し、保存することができるWindowsのネイティブアプリです。しかも、完全無料で利用できます。 Lunacyの画面 Sketch（

前回の投稿でAppleのFluid Interfacesについての論考しましたが、Fluid Interfacesが生まれた一つの背景として、ディスプレイの巨大化があります。 本稿では大画面化するディスプレイへのUIデザインの対応について、現在どの様な流れになっているのか、個人的に観測している中で考察している事をご紹介したいと思います。 巨大化し続けるディスプレイサイズ2007年に初めてiPhoneが世に出てから、現在の最新のモデルiPhone XS Maxまでのディスプレイサイズの変遷をまとめたのが下の図です。 初代iPhoneとXS Maxを比較すると、物理的なディスプレイ面積は約2.7倍大きくなり、ディスプレイの縦横比は約1.4倍縦長になっています。 iPhone Xから22%縦長化特に著しく変化したのが、iPhone Xが登場した事によってそれまで1.77だった縦横比が2.16まで

CSSで要素を揃えることは楽しみであると同時に、挫折を経験することがあるかもしれません。CSSはすぐに進化し、新しい仕様はブラウザにどんどん実装されています。 最近主流になっているCSSの整列テクニックは、これまでのものとはまったく異なります。CSS Grid, Flexboxなど、CSSレイアウトを考慮したよりモダンな方法を紹介します。 CSS Alignment Cheatsheet 記事: Demystifying CSS alignment 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 基礎知識: インラインとブロック 要素が含まれるコンテナに指定して揃える コンテナ内の要素に指定して揃える 揃える方法の紹介の前に、まずは基礎知識から。 基礎知識: インラインとブロック 最初に重要なのは、揃えるのがインラインなのか、ブ