サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
災害への備え
quoitworks.com
「戦略的なコンテンツ設計って、実際どうすればいいの?」 この疑問、胸に刺さりませんか?Webサイトリニューアルの会議で、こんな場面に遭遇したことはありませんか: 「ユーザーファーストで作り直そう」と言われても、具体的に何をどう変えればいいのか分からない 「競合他社と差別化できるコンテンツを」と要求されても、アイデアが思い浮かばない 「顧客のペルソナは理解したけど、それをどうコンテンツに反映させればいいの?」と悩む 「アクセス解析のデータは揃っているのに、それを活かしたコンテンツ設計ができない」 これらは全て、「戦略的なコンテンツ設計」の難しさを物語っています。 Web担当者もディレクターも、頭を抱えるこの問題。「なんとなく分かるけど、実践となると…」そう感じている方も多いのではないでしょうか。 実は、この「戦略的なコンテンツ設計」を効果的に行うためのフレームワークがあります。それが「コンテ
こんにちは。UIデザインのプロフェッショナルとして、長年マテリアルデザインを研究してきた私が、今回はエレベーション(奥行き)の重要性と活用方法について、詳しく解説したいと思います。 マテリアルデザインは、Googleが提唱するUIデザインの体系であり、現実世界の物理法則を取り入れることで直感的で美しいデザインを実現しています。その中でも特に重要な概念が「エレベーション(奥行き)」です。エレベーション(奥行き)を適切に活用することで、ユーザーの直感的な理解を助け、UIの構造や階層を明確に伝えることができます。 本記事では、エレベーション(奥行き)の基本的な考え方から、実践的な使い方まで幅広く解説していきます。デザイナーの方はもちろん、クライアントの方やディレクターの方にも、エレベーション(奥行き)の重要性を理解していただき、より洗練されたUIデザインを目指すための知識を提供できればと思います
こんにちは、クオートワークスです。 普段、さまざまなシーンで資料を作成する際、デザイン面で以下のように悩むことは多いのではないでしょうか。 「資料が野暮ったい」 「伝わりやすい資料を作りたい」 「資料デザインを洗練させたい」 「上司や顧客を驚かせたい」 デザインは単なる装飾ではなく、情報の伝達に重要な役割を果たします。適切なレイアウトや色彩、フォントを選ぶことは、読み手にとって理解しやすく魅力的な資料を作成する上で欠かせません。 しかし、デザインスキルに自信がない場合や、時間が限られている場合、この課題に取り組むことは容易ではありません。 そこでこの記事では、スライド資料を作成する際のデザインの基礎的なコツのほか、デザインが苦手でもデザイナーの技を簡単に再現でき、ワンランク上の資料を効率的に作成するためのヒントをご紹介します。 作例をたっぷり掲載しているので、ぜひ実践にお役立てください。
こんにちはQUOITWORKS(クオートワークス)です。 現在のSEOはユーザーにとって有益であり 価値あるコンテンツを高く評価するのが特徴です。 逆にGoogleの品質ガイドラインに反する手法を用いて検索順位を上げる「ブラックハットSEO」と呼ばれる手法はGoogleから厳しくチェックされており、違反すれば不正行為として厳しいペナルティを受けてしまいます。 小手先のテクニックで検索順位を高めようとしても、 Googleのアルゴリズムに見破られてしまう現在において、 SEO対策の基本はユーザーに寄り添い有用なコンテンツを調査し継続的に提供することです。 今回はQUOITWORKS(クオートワークス)でWebサイト設計時に行なっている有益なコンテンツを用意するための、 「SEOに有効なキーワード調査の仕方」をまとめていきたいと思います。 目次 1.検索ニーズと訪問者の背景に注目する2.キーワ
デザインをする上で避けては通れないのが制作物へのフィードバック。自身が受ける以外にも同僚や部下のデザインに対して言う側に回る事も多く発生するかと思います。 そこで痛感するが教える事の難しさ。的確なアドバイスをしたつもりが、意図しない仕上がりや進展がないといった事が起こる場合もあり、下手したら自分がデザインするよりも難しいのでは?と感じているのは私だけではないはず。 そんな時に出会ったのが著者、前田高志さんの「鬼フィードバック」という本。デザインの完成に至るまで前田さんとデザイナー達によるフィードバックのやり取りを見ていく内容になっておりますが、前田さんの発言や切り返し方に着目して見ると、教える側の注意点や効果的なプロセスなどのヒントを多く知ることができました。 そこで今回は私なりに気づいた点をまとめてみました。受ける側の目線や全体を通したやり取りが気になった方はぜひ書籍も見てみてください。
こんにちは、QUOITWORKS Incです。 新卒で入社してから半年が経ちました。 入社した頃に比べれば少しは成長しているとは思うのですが、まだまだ基本的なことが出来ていないためデザインが上手くなれるよう勉強する毎日です。 早速ですが今回は、勉強として架空のサイトリニューアルに挑戦したのでその内容をまとめていきたいと思います! 未経験で入社すると、最初はパーツの作成など小さい作業から始めていくと思います。 かと言って、いざ大きめのデザインの仕事が来た際にいきなりデザインすることは難しいため、弊社では勉強として架空のサイトリニューアルを定期的に行なっています。 普段から訓練することでそういった機会に対応する準備ができ、会社側もその人の実力感をいきなり実案件で試すのではなく、学習の中でつかめるため双方にメリットがあるそうです。 今回のリニューアルは勉強としてやっているということと、実際の制作
quoitworksのムラマツこと、muuuuu.orgの中の人、ムーちゃんです。こんにちは。お盆休みまでもう少しですね!みなさま仕事の進捗はいかがでしょうか。 webのデザインの現場でよくオーダーとしてあるのが、「紙っぽいデザイン」です。 webのデザインはコーディング時のことを考えすぎてしまったり、ユーザビリティや、web独自の視線の流れを意識しすぎてしまうあまりにダイナミックさに欠けたりすることが多いような気がします。 またお客さんとしても生まれてからwebを見ている時間よりも、紙のデザインを見ることが多いので、イメージとして紙(ポスター、雑誌)のような完成図をイメージされることが多いのではないのでしょうか。(特集ページや、LPや、メインビジュアルなどです。検索画面とかは違いますよ!) それで今回はLPやアバウトページ、特集ページでよくある「紙っぽく」オーダーをスマートに解決するため
こんにちは!QUOITWORKS Incでディレクションとデザインを担当しておりますワタナベです(@ws0606)。今回はデザイナー向けに押さえておきたい「写真の構図」について記事を書きました。 デザインをする上で欠かせない素材の一つが「写真」。カメラマンと撮影に同行して写真の指示や良し悪しの判断を求められたり、フォトストックから選定をして加工、トリミングをしたりとデザイナーが写真と関わる場面は多くあります。 そういった場合に写真の知識があれば、カメラマンと円滑にコミュニケーションが取れ、自分で加工する際もより魅力的に見せることが出来ます。 またデザインの画面上での見え方(特にファーストビューなど)もこの構図の考え方を取り入れることにより安定したスタイリングができるなどメリットや、それをお客さんに説明するときも協力な根拠になります。 そこで今回は現場にも役立つ代表的な写真の構図やアングルに
QUOITWORKSでディレクションとデザインをやっております、村松です。 とっても久しぶりな今回は、Webの受託制作で確実と言って良いほど行われる参考サイトの探し方について体系化された記事がなかったので、1940年から世界中の人々を魅了し続ける不変の法則。不朽の名著。ジェームス W.ヤングの「アイデアのつくり方」のつくり方を参考に、僕が10年以上のキャリアから手探りで模索したやり方をまとめました。 目次 1.まず最初にアイデアのつくり方はどのようにやるのか。2.なぜ参考サイトを集めるのか。3.何から着手、どんな観点で参考を探すのか4.実際に使ってるサイト。5.初心者がやりがちな誤った探し方、余談 1.アイデアのつくり方はどのようにやるのか。 まずアイデアの原理から説明します。 アイデアというのは「既存の2つ以上の要素を新しい一つの形に結びつけること関連性を見つけ出すのが上手い人が得意とさ
●自動カーニングCSS設定 本文にやると詰まりすぎるのでletter-spacingで字間を少し広げるといい。 文字詰めできるCSSのfont-feature-settingsが凄い!日本語フォントこそ指定したい自動カーニング https://ics.media/entry/14087 ●「」などの頭を揃えるjs 「」や『』など約物が半角にできる、Yaku Han JP のご紹介 http://taneakashi.ad-mk.com/yaku-han-jp-introduction.html ●テキストの箱組みを綺麗にするcss設定 テキストの箱組みをしたい時に使えるCSS https://www.pressmantech.com/tech/coding/1551#css-text-justfy ※英語の改行でおかしくなるのでこれを効かせたら 長めの英語の文言周りをチェックする必要がある
こんにちはMUUUUU.ORGの中の人こと、QUOITWORKS Inc.のムラマツです。 最近はWebデザインと、グラフィックデザインが同時に発生する案件を絶賛募集しております!(宣伝) えーと今回は、Webのディレクションというのは正直決まったやり方が存在していないのが現状でありまして、 今の時代の業界標準を確認し直そうと思いまして「第一線のプロがホンネで教える 超実践的 Webディレクターの教科書」を参考に、改めてWebディレクションとは何をする仕事なのか、 Webデザインを始める前段階というところにフォーカスしてまとめました。 目次 前段:コミュニケーションはディレクターのメイン商品 1.ヒアリングをする 2.リニューアルの場合、現サイトの課題だしをする 3.コンセプトを作る(共通言語となる目標を決める) 4.ポジション設定をする(競合に対しての強みを見つける) 5.ペルソナ作り(
サイト作りの根本って、「ユーザーに意図した行動をとって欲しい!」「ユーザーに意図した感情を抱いて欲しい!」って事だと思うのですね。じゃあ行動心理じゃないかと思いまして。今回は行動心理学をweb制作に取り入れる方法をまとめました。調べ始めるとむちゃくちゃたくさんあるので代表的なものを今回は紹介します。 目次 アンカリング効果 カクテルパーティー効果 バンドワゴン効果 ハロー効果 アンカリング効果 アンカリング効果とは、最初に提示された特定の数値や情報が印象に残り、それが基準点(アンカー)となり判断に影響を及ぼす心理傾向です。 100万円▶︎90万円となっているときに安くなっている(本当の相場の価格より高くても、その場では相場より安く感じる)感じたり、交渉の場で最初にふっかけ、そこから徐々に条件を優しくされると難しい条件でも「最初と比べれば」という思考が働いて悪くない条件だと感じてしまいません
こんにちはMUUUUU.ORGの中の人こと、Quoitworksのムラマツです。 アニメーションをとりいれるとwebサイトが華やかになりイイ感じに見えますが、 サイトを分かりやすくする、目的を達成するために上手に使えていますでしょうか。 今回はオライリーから出ている「インタフェースデザインの実践教室 ―優れたユーザビリティを実現するアイデアとテクニック」を参考に(心理学とは別の兄弟本みたいなやつです) UIの領域での”問題を解決する為にどうやってアニメーションを取りいれるか”をまとめていこうと思います。(アニメーションによってデザインの力を増幅させる効果に関しては今回は置いておいてください) そもそもなんでwebサイトにアニメーションを入れる必要があるのか 小さな変化や、大きな変化に隠れて見逃されてしまいかねない変化に、ユーザーの目を向けさせるときに利用します 激しい状態の変化を把握しやす
1.そもそも「論理的とはなにか」 主張に至るシナリオを明確化する。 「概要→詳細→具体化」と考える。 まず全体像を把握してから詳細を考えると迷子になり難い。 全体を部分の関係を明確にする事により、今いる場所がわかりやすくなる。 垂直思考と水平思考を組み合わせる。 水平思考なき垂直思考は周りが見えなくなりやすい。 水平思考で物事を広く浅く分析したあと、優先順位をつけ、重要度が高いものから垂直思考で深く考察する。 2.基本的な手法 プロセスを明らかにする ・できるところから着実によくしていく。 └時間はかかるが、着実によくなる。 ・目標をきめて一気に取り組む └リスクはあるが、ムダがない。 三角ロジックで説得力アップ。 主張、根拠、データを明らかにする事で説得力をアップさせる。 もし根拠が足りない場合は多角三角ロジックで補強する。 三角の頂点である主張をデータ、根拠で補強し説得力を作り出す方法
オライリーから出ている「ユーザーインターフェースデザインの心理学」から使えそうなものを実例を踏まえピックアップ!これでUIデザイン説明の説得力をあげよう! 情報は一度にすべて見せるのではなく、そのとき必要なものを段階的に開示させた方がよい。 デザイナーが犯しがちな失敗は一度に大量の情報をユーザーに与えてしまうことです。 情報は一度に大量に与えるのではなく、その時点で必要としている情報だけを与えるほうが様々なニーズに対応することができます。 ユーザーの中には大まかな説明でよい人もいれば、詳細を知りたがっている人もいます。 つまりどういう事? 情報は一度に見せるのではなく段階的に見せる 重要なのはクリック回数ではない。クリックのたびに必要な情報が手に入るのであればユーザーは喜んでクリックする 誰がいつ何を必要としているかを理解する。各段階で何を必要としているか的確に把握していないと、この手法は
こんにちは。MUUUUU.ORGの中の人こと、 Quoitworks(クオートワークス)のムラマツ(マツムラではありません)です。 ブラウザの進化により昨今のwebサイトでは色々なアニメーションが実装できるようになってきました。そこで今回は動きに対する感性を磨き、「もっと気持ち良い感じに」というクライアントの要望をスマートにかなえる事ができるように、 セクシーだと思ったUIアニメーションを、エイヤエイヤとまとめてみました。(すみません!サイト負荷が高くサーバーがダウンしてしまうので、一部リンクのみになってます) line25.com https://dribbble.com/shots/1448379-Lookbook-nu-app https://medium.com/ui-ux-articles/3d1b0a9b810e http://thedesigninspiration.com/
雑誌や映画、TVなどは関わった人間の名前が載るページが当たり前に用意されています。 逆にWebやグラフィックなどはそれ無い場合が少なくありません。 誰からも褒められない。憧れられない。咎められない。 そんな状況でプライドをかけて仕事ができる人なんているでしょうか。 弊社には革新的なビジョンや、世界を変えるような大きな志はありません。 しかし弊社では、制作物に対して、誰が関わったのか、どんな成果物を作ったか、そしてそれがクライアントとユーザーの役にたったかにこだわれる会社でありたいと考えています。 輪投げの輪を意味するQUOIT。 「クライアントと信頼の輪をつくり、ユーザーの心に狙い入れること」 これが私たちの使命です。 まずは、お気軽にご相談ください ムラマツヒデキ Producer / Art Director 2007年から都内Webプロダクション数社にて、大規模企業サイト、プロモーシ
東京のWeb制作会社QUOITWORKS(クオートワークス)の企業サイトです。
Create a quoit of trust with the client and focus on the user's heart 私たちは、「お客様の課題を正面から、王道に解決すること」「クリエイターとして、プライドを持ったモノづくり」 この2点の両立を目指す、有用であり、美しいものを作るWebプロダクションです。 数字や理論、ロジックを骨組みに、クリエイターとしての感性と知見を込めた丁寧で真摯なクリエイティブを追求します。 Learn more
このページを最初にブックマークしてみませんか?
『東京のWeb制作会社・ホームページ制作|QUOITWORKS Inc.(株式会社クオートワークス)』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く