Webサイトのメインビジュアルの構図を集めて分析してみた。｜ameko
初めまして、ameko(@tk04amedama)と申します。 普段は都内の制作会社でWEBデザイナーをしています。 と言ってもまだまだ新米なので、日々勉強中です。 その勉強の一環で、最近のWebサイトで使われている メインビジュアルの構図を一覧にしてまとめた画像をTwitterに投稿してみたところ、思いがけず多くの方に反応いただけたので、その後に行っていた構図ごとの分類分けや分析も公開してみようと思い、初めてnoteに投稿してみました。 はじめに集めたサイトの数は全部で７０個。自分の仕事の参考のために集めたものなのでほとんどがBtoB向けサイトです。（BtoC向けサイトだと、この構図一覧もまた、全然違うものになりそうだなと思う。） 構図の名前は、なんとなく自分なりに語呂がいい名前をつけているだけなので、あまり突っ込まずふんわり流していただけると幸いです。（もしこの構図の正式名称とかあった
フロントエンドエンジニアにとっての2019年。アンケート結果から分析するイマドキのウェブ制作 - ICS MEDIA
ウェブ業界の当たり前だと思っていることでも、同業他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか・・・ この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載第5回目となる本記事ではウェブ業界の「フロントエンドエンジニアにとっての2019年」と題してアンケート結果を紹介します。 JSでブラウザ挙動をどうやって防ぐ？ ウェブページでインタラクションを作るときに、ブラウザのデフォルト挙動が邪魔になることがあります。たとえば、aタグのリンクはJavaScriptでキャンセルでき、自前の処理に置き換えることができます。 ブラウザ挙動のキャンセルのやり方にはさまざまな手段があるのですが、主流のやり方はどれでしょうか？ addEventListener()メソッドやonclick属性のイベントについて質問しました。 187票の回答があり「ret
Goodpatchがクライアントワークを続ける理由｜Naofumi Tsuchiya / Goodpatch
先日、あるイベントで対談した若手スタートアップ起業家からこんな質問をされた。 「土屋さんは、なぜGoodpatchでコンサルのような仕事（受託）を続けようと思ったんですか？」 おそらくこの質問の背景として、出資を受けたら受託は止めて（もしくはVCに止められて）、自社サービスにフォーカスする会社がほとんどだし、スケールしないのに出資を受けているのになぜ受託を続けているんですか？という意味合いだろう。 昔はよく聞かれた気がするが最近はあまり聞かれる事がなかったのだけど、久しぶりに質問をされたので、それについてnoteに書いてみたいと思う。 ちなみにGoodpatchでは基本“受託”という言葉は禁止していて、クライアントワークもしくはデザインパートナー事業と呼ぶようにしている。理由は日本では受託という言葉が言われたものを作るだけの下請けのようなイメージになってしまっているから。 さて、出資を受け
5.5万ページのソニーWebサイト。時代遅れに見えるサイト管理体制がガバナンス、セキュリティ面で有効 | 稲富滋のWebマスター探訪記
ソニーのWebサイトはヴィジョンアーツ株式会社ウェブサイト課の総勢14名で運営しています。ウェブマスター業務だけでなく、ITインフラ管理からコンテンツの制作・公開、サイト全体の企画やガバナンスまで担っています。また、この仕組みを活用してグループのウェブサイトも20サイト以上運営しています。一つの組織で全てのレイヤーを担うのは、一見、時代遅れに見える管理方法ですが、ガバナンスやセキュリティにおいて最適だと考えています。 そう語るのは、ソニーのグループ企業、ヴィジョンアーツに所属する田尾幸弘さん。 田尾さん率いる「ウェブサイト課」では、コンテンツオーナーである80以上の部署から、毎月、さまざまな相談やリクエストが250件ほど寄せられると言います。チームのほぼ全員が「コーディングができる」という専門性を持ちながら、それだけにとどまらず「社内のウェブコンサルのプロになる」というビジョンを掲げていま
スマホ向けのナビゲーションにハンバーガーメニューを使うなら、ソーセージリンクを試してみて
スマホ向けのナビゲーションにハンバーガーメニューが使用されるのを多く見かけると思います。ハンバーガーメニューが必ずしも悪いということではないですが、ハンバーガーのコンセプトを乱用または誤用している場合は、ソーセージリンクが適しているかもしれません。 スマホ向けのナビゲーションデザインについての考察を紹介します。 Using Hamburger Menus? Try Sausage Links by Bradley Taunt ソーセージリンクは先週公開した記事「テキストだけのボタンは、なぜスマホでのユーザビリティを損なうのか」にも通じるものがあります。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ハンバーガーメニューを使うなら、ソーセージリンクを試してみて ハンバーガーメニューとは、長所と短所 ソーセージリンクとは、長所と短
UXリサーチの学び方ー研修編ー｜mihozono
前回の記事で自分のUXリサーチのはじめかたを紹介しましたが、次は研修編ということで、これまで自分が受けた研修でUXリサーチの実践に役立ったものを紹介します。私の前職リクルートでは研修制度が充実しており、実務に必要があれば部署の予算で受けさせてもらえたり、自分で受けたいものを申請して一部自己負担で受けられる制度などがありフル活用していました。（中にはもちろん全額自己負担で受けたものもあります。） ①樽本さんのユーザーテスト講座オススメ度: ★★★★★ 学べること: ユーザービリティテスト 「ユーザビリティテストを始めてみたい」と思っている方は、まずは樽本さんの研修に参加することをオススメします！樽本さんの著書ユーザビリティエンジニアリングを元に実践しながら学ぶことができ、設計から実査、分析まで一通り体感できると思います。直近の開催スケジュールはわからないですが、樽本さんのメールマガジンで開催
4.5:1に苦しむデザイナーの皆様へ | 水無月ばけらのえび日記
公開: 2019年6月23日23時40分頃 WCAG 2.0 の達成基準 1.4.3 にはカラーコントラストの基準があり、背景と文字とに4.5:1以上のコントラスト比を持たせることを要求しています。 1.4.3 コントラスト (最低限) : テキスト及び文字画像の視覚的提示に、少なくとも 4.5:1 のコントラスト比がある。ただし、次の場合は除く: (レベル AA) 大きな文字: サイズの大きなテキスト及びサイズの大きな文字画像に、少なくとも 3:1 のコントラスト比がある。付随的: テキスト又は文字画像において、次の場合はコントラストの要件はない。アクティブではないユーザインタフェース コンポーネントの一部である、純粋な装飾である、誰も視覚的に確認できない、又は重要な他の視覚的なコンテンツを含む写真の一部分である。ロゴタイプ: ロゴ又はブランド名の一部である文字には、最低限のコントラスト
「つまらない」「読まれない」企業ブログは何が問題なのか。 | Tinect株式会社
個人的に、企業のオウンドメディア立ち上げに関する悩みをよく耳にします。 オウンドメディアって何？ という方も多いかもしれませんが、要するに企業のオフィシャルブログ／メディアの類と思って差し支えないでしょう。 一時期「オウンドメディアは下火」などと言われていましたが、Googleトレンドで動向を調べてみると （Googleトレンド「オウンドメディア」より） 下火になった、と言うよりは一定の需要を保ち続けている、という状態でしょうか。 広告の単価が上昇し、競争が厳しくなっている現在、なんとか固定ファンを獲得して、販促につなげたいという企業の思惑が見て取れます。 個人的に頑張っている担当者の方を知っていることもあり、また、企業の中には素晴らしい知見がたくさん眠っていることから、企業がもっと面白いブログを書くようになるといいな、とも思います。 さて、その一方で残念ながら 「つまらない」 と言われて
意匠法改正が変えるWebサイトリリース・リニューアルのプロセス | Web担当者Forum
意匠法が大きく変わります。 「特許法等の一部を改正する法律案」は2019年3月1日に閣議決定され、4月16日に衆議院で可決され、5月10日に参議院で可決されました。 この法律案には、意匠法の改正が含まれています。 意匠権について、より世界的な運用基準へと準拠し、使いやすいものにするためです。 今回の法改正により、Web担当者にとって大きな影響を及ぼすのが、Webデザインの意匠権が認められたという点です。 詳細については、弁理士の渡部仁先生に寄稿頂きました「意匠法改正によるWebデザインの保護」という弊社サイトのブログ記事をご覧下さい。 今回の法改正のポイント意匠権は強力な権利Webデザインが意匠権として認められるようになったという事は、自社のWebサイトのデザインを法的に強力に保護できるようになったという事です。 その一方で、他社が意匠権を獲得したWebデザインと自社のWebデザインが似て
拝啓、お客様。Webサイト制作のコストはここにかかります。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
令和ですね。こんにちは。バックエンドエンジニアのまさくにです。ゴールデンウィークで休んでいたら、シュワシュワと筋組織が融解し、「自然に帰ろう……自然に帰ろう……」と遺伝子に刻み込まれた内なる声が僕を光射す方へ誘いました。もはや社会復帰は難しいかもしれない。 さて。さてさて。 皆さま、いかがお過ごしですか。新しい期に入り、心機一転したい気持ちでしょうか。何ならアレですか。お持ちのWebサイトをリニューアルしたい、そんな気持ちをそろそろお持ちでしょうか。 失礼ながら、そのお気持ち、 たぶん5ヶ月、遅いです！ 仕事としてWebサイトの制作に携わってから、5年くらいが過ぎました。現在はバックエンドの作業を行いながら、TD（テクニカルディレクション）やPM（プロジェクトマネージャー）として、プロジェクトに関わることも増えてきています。その観点から言って、お客様と我々の間には「Web制作」の考え方にお
センスに頼らないプランニングの基本
プランニングといえば、クリエイティブなプランナーが身に付ける、センスと発想力を求められる特殊スキルと思われがちです。 しかしプランニングはもっと身近なスキルです。すべてのビジネスパーソンにとって必要な力で、誰でもそれなりに実践できる日常的な営みです。 というわけで、誰でも真似できるプランニングの基本について、分かりやすいプロセスと具体的な実践例と共にご紹介します。
PageSpeed Insightsの真実。点数の公式と高得点をとれない理由。5項目の最適化をすることがスコアアップの近道。 | アイデアマンズブログ
指標についてはこちらの記事がわかりやすいのでぜひご参考ください。 これらの指標それぞれについて先ほどの順位点数を出します(0〜100)。その5つの順位点数に重みを加味して平均値を出したものが、PageSpeed Insightsで表示される点数です。 つまりどういうことか PageSpeed Inshgtsの点数はいかにファーストビューが速く完成して操作できるようになるか、それが全てということです。 例えば、同じ内容のWebページでも、 A ファーストビューが1秒で表示されるが、スクロールしたときのコンテンツはその後4秒かけて少しずつ表示される場合 B 読み込みから5秒は画面が真っ白だが、その後ページの上から下まで一気に表示される場合 PageSpeed InsightsはAの場合を高く評価し、Bの点数は低く評価します。これは実際のページ離脱の感覚として理に適っていると思います。 点数が上
君たちはどう逃げるか - megamouthの葬列
平成が終わるというのに、暗い話題ばかり目につく。 おおまかに言って、アラフォーは自分たちの老後はどうなるのかと、心配しているし、若い人はそもそも結婚して子供を作れるのかと、疑問に思っているし、年金世代は死ぬまで今の生活を続けられるだろうかと、気が気でない。 世間の憎しみは、この世界を作った政治家や官僚だけでなく、逃げ切ろうとしている社会階層にも向けられつつある。 はじめは、そこそこジョークじみたニュアンスで発せられていた「上級国民」という言葉が、最近では真性の憎悪以外に説明のつかない熱量を帯びて、口々にささやかれ始めているのだ。 もはやこの国で、人生の盤石と安心を確立することは難しくなった。 だからこそ、かつての繁栄と秩序がまだ残っているうちに「逃げ切る」という考え方が、注目され、羨望され、時には嫉妬深く、語られるようになっている。 そういう私も、出来ることなら逃げ出して、海辺でギターを弾
ウェブ制作を2019年から勉強する人に教えたいこと | ブログ | ウェビングスタジオ
年に二、三回、初学者向けのHTML・CSS講座の講師をしています。対象は社会人ですから、生徒のほとんどは新人研修の一環で派遣されてきたか、企業のウェブ担をすることになった人たちです。 短い日程では、最低限のウェブサイトを作成するところまでを教えるまでが精一杯ですから、2019年の時点で学んでほしいこと、知ってほしいことを資料にまとめて終了後に渡しました。 許可を頂いたので、その資料の内容を記事として公開します。 理解しやすい表現を優先しているので、もやもやを感じる方もいるかもしれません。その場合はぜひ、補足記事などを書いて教えてくださるとありがたいです。 わかりやすいCSS設計 divでモジュール化しよう ウェブサイトはページ内で、ナビゲーション、リスト、記事、写真ギャラリーなどの、多くの部品に分かれています。 HTML・CSSコーディングでは、これらの部品を「モジュール」と定義して、部品
なぜ、Web制作会社は儲からないのか｜栗原康太
このツイートを見ていて、「たしかに！」と思ったのですが、Web制作事業は、なぜ儲からないかと言うと、 ・商談獲得 ・コンペ参加 ・提案書作成 ・クロージングまでのフォローアップ が半端じゃなくかかるからです。 前職でWeb制作系の事業をやっていたのですが、 ・案件を見つけるまでの営業、マーケティングコスト ・コンペに伴う、提案書やデザイン案の作成コスト ・数百、数千万円の金額は即決されないので、クロージングまでのフォローアップコスト ・コンペ勝率が3割だと、ここまでを掛ける3にしたコスト などが本当に大変でした（この辺は、PR会社も、SEO会社も、UXデザイン会社も、コンサル会社も一緒かもですが）。顧客獲得単価が下手すると100万円とかになりかねない。 結果として、自社の利益率悪化と、顧客へのサービス提供金額の高騰が起きるので、ベンチャー広報さんのように、このあたりをハックするのは必須の業
W3Cで現在公開されているHTMLとDOM仕様は将来廃止されます - 水底の血
まえがき W3C（とWHATWG）からの公式なアナウンスはまだ確認していませんが、何度目かに結成されるW3C HTML WorkingのDraft Charterと、このCharterから辿れるDRAFT Memorandum of Understanding Between W3C and WHATWG（Memorandumは日本語で覚書などと訳されるので、ここでも覚書と呼びます）がブログエントリーのタイトルのソースになります。もっとも、今確認できる覚書もドラフトですから、変更があるかもしれません。しかしながらURLで観測できるわけですから、大筋でW3CとWHATWGとの間で合意が取れているのではないかと推測します。あとは、覚書だけでなくCharterもドラフトということになっていますが、以下の文章では面倒なので省略します。最後にお約束ですが、このブログエントリーは「だいたいあってる」感
「受託」は時代遅れになり「共創」へとシフトする。顧客との関係が変われば、活躍する人材も変わる。｜『TAM made by people』創刊｜Shinji Tamehiro
「受託」は時代遅れになり「共創」へとシフトする。顧客との関係が変われば、活躍する人材も変わる。｜『TAM made by people』創刊 日本の受託は時代遅れなのかもしれないTAMは昨年、ヨーロッパでデジタルエージェンシー事業を拡大すべく、オランダ・アムステルダムに現地法人を設立しました。しかし、現地に伝手は一切なく、顧客やパートナーをイチから開拓しなければなりませんでした。 そこで昨年11月、オランダに移住したTAMアムステルダムを設立する日本人スタッフとともに現地の大手のデジタルエージェンシーを訪れて、僕の下手くそな英語で会社と事業内容を説明したのですが、その初対面の相手に “お説教” をされたんです。 僕は、TAMは1992年創業で、まもなく設立27年を迎えること。主にナショナルクライアントと言われる大手企業を支援していること。彼らに戦略や施策、見積もりを提案し、受注したら仕事が
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Manabu Ueno on Twitter: "受託形態における重要なポイントは、様々な企業と仕事をした経験が「クライアントにとっての」価値になることだ。事業者は業界内での自分達の相対位置が知りたい。細かい話はできないとしても「どこも悩みは同じですよ」とか「一般的にはこうですよ… https://t.co/dgH2GpYbOw"
The Blog | Welcome to Adobe Blog
単発受託WebデザインとインハウスUXデザインの違うところ、同じところ
