メインビジュアル、CTA、フッターなど、セクションやパーツごとの部分的なデザインを集めたサイトです。主にSaaS/コーポレートサイト/BtoBのWebサイトやランディングページを掲載しています。Webサイト制作の構成やキャッチコピー、デザインの参考にどうぞ。
Parts. - パーツ別Webデザイン集
メインビジュアル、CTA、フッターなど、セクションやパーツごとの部分的なデザインを集めたサイトです。主にSaaS/コーポレートサイト/BtoBのWebサイトやランディングページを掲載しています。Webサイト制作の構成やキャッチコピー、デザインの参考にどうぞ。
144 顧客にどうやってWebコンテンツを書いてもらうか。（稲田）2022/6/10｜jbn_director
Webディレクターをしていると、顧客にコンテンツを書いてもらう状況が度々訪れます。本来はライターが取材して記事を作るのが一番ですが、地方企業だと「そこまで予算が取れない」ということもしばしばです。いま、ぼくの想像では全国で500人のWebディレクターが頷きました。 一般的な文章を書き慣れていない製造系BtoB企業の場合、「コンテンツを書いてもらう」が大きなハードルのひとつだったりします。いま、ぼくの想像では全国で800人のWebディレクターが頷きました。 「顧客にどうやってコンテンツを書いてもらうか」については十人十色のやり方があると思いますが、ぼくの場合、下記４点が有効そうでした。 顧客に原稿を書いてもらう4つのポイント１. ドキュメントの雛形を作る雛形を作ることで、ライティングのガイドラインになる 『最初に結論を書く』などはここで設計しておくと便利 ドキュメントの雛形例 ２. スプレッ
「Webページのワイヤーをいきなり作らない」という試み。｜稲田英資／Web活用支援
機器メーカーA社様の製品サイトの情報設計をしています。 今回、マイルールで決めたのが「Webページのワイヤーをいきなり作らない」です。ワイヤーとはデザイン前のWebページ設計図のようなものです。 今回のA社様では製品量が膨大なので（全種類を合計したら400点くらいにはなる）、何となくワイヤーを作ってデザイン＆構築してしまうと後で大変な目に遭いそうだからです。制作会社あるあるですが、今回はその罠を避けたい。そこで自分に課したルールが「Webページのワイヤーをいきなり作らない」です。 まずはコツコツ情報整理大変ですが、まずは紙のカタログを参考に製品情報の取りまとめから始めました。スプレッドシートに仕様や製品タイプの情報をコツコツまとめていきます。メイン製品だけで200個近くいきました。他の製品を考えたらこれで半分程度です。ひいい。 でも、おかげでメイン製品の全体像が見えてきました。 「分からな
Webサイト制作時に必須になるツール｜株式会社イーツー
Webサイトは作成して公開したら終わりというわけではなく、日々改善を重ねていくことが大切です。 改善をしていくには、公開したWebサイトがユーザにどのように見られているか、またはどのようなユーザが訪れているか、といった解析をおこなっていく必要があります。 そのようなユーザの動きからWebサイトを解析できるツールが数多くあり、弊社でもWebサイトを構築する際に必須として使っているものがあります。 便利で高機能な上に無料で利用できるものが多くあるので、弊社で普段の制作において活用しているツールをいくつか紹介してみたいと思います。 Google アナリティクス（Google Analytics）言わずと知れたGoogleさんから提供されているWeb解析ツールです。 Webサイトを解析することで人気のあるコンテンツを把握したり、サイト全体の問題点などを把握することができます。 Google アナリ
デザインの現場で絶対に必要になる基礎知識７選 | DevelopersIO
こんにちは、アシスタントデザイナーの秋田です！ デザイン知識ゼロで入社した私が、一番最初に学んだ現場で使う基礎知識をまとめました。 近年では、未経験でキャリアチェンジしてデザイナーを目指す方も珍しくないかと思います。私もその一人です。デザイン教育を受けていない人にとって、デザインは何から勉強し始めたらいいのか迷ってしまうことがあるかと思います。 この記事は、全て先輩デザイナーからのフィードバックにより得た知識をまとめています。実際に現場で使う知識なのでデザインに興味がある方や、これからデザインの勉強をされる方にとって少しでもヒントになったり、参考になれば幸いです。 1. 「デザイン＝見た目を綺麗にすること」ではない 「デザイン」と聞くと、皆さんはどんなことが頭に浮かぶでしょうか？「見た目を綺麗にすること」と思われる方が多いのではないでしょうか。もちろんそれも間違いではありません。しかし、な
Zenlogic よくある質問（FAQ）
WEBページの表示速度を速くしたい。FAQ番号FAQ01711最終更新日2021/09/27 18:29:36 WEBコンテンツを圧縮して転送するキャッシュ機能を利用する WEBコンテンツを圧縮して転送する Apacheモジュールの「mod_deflate」を利用する事で、ブラウザからリクエトされたWEBコンテンツをサーバー側で圧縮し転送する事が可能です。 リクエスト毎の転送量を減らす事で速度改善が図れます。 ＜利用方法＞ 以下の記述した「.htaccess」をサーバーへアップロードする。 #-----ここから-----# <IfModule mod_deflate.c> SetOutputFilter DEFLATE BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip Br
そろそろ著作権表示でAll rights reservedを書かないようにするという提案
どんなホームページを見ても、フッターに当たり前のように見かける「All rights reserved.」という表記。 直訳すれば「すべての権利を留保する」ということになるため、著作権を主張するために必要な表記のように思えますが、実は現在ではほとんど、いや、全くと言ってよいほど意味が無いものです。 そもそも、何でこのように書くことになったのか 事の発端は1910年に調印された「ブエノスアイレス条約」です。 （※日本は調印していません。） この条約は、アメリカなど方式主義（※下記参照）を採用していた国々で結ばれたもので、その中で「自国以外の加盟国において著作権による保護を受けるためには、権利を留保するという表示が必要」とされていたため、マルCマークや最初の発行年（これらは万国著作権条約では必要な要素）とともに記されるようになりました。 ちなみに、表記として必要な物はマルCマーク、最初の発行年
抜け漏れをなくすために！Webサイト提案の見積作成時に確認したい7つのポイント | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうも！ 最近ポケモンカードにハマっております！ りくです！ 僕の名前とかはどうでもいいので、ポケカ面白いってことだけでも覚えて帰ってください！ さて、ちょっと真面目な話をしますと、先月までアカウントプランナーチームに所属しておりましたので、見積もり作成時の注意点をまとめてみました。 この記事が……公開される頃には……ディレクターに戻ってます……！（たぶん！） 最後までご覧いただけると幸いです。 共通で確認するべき事項 CMS（WordPress）の導入 はい！ みんな大好きCMSですね！ CMSの導入有無で作業工数がかなり変わってきます。 一番有名なものとしては、オープンソース型のWordPressだと思われますが、各制作会社さんによって得意なCMS／不得意なCMSがあると思いますので、社内のエンジニアさんに実装経験のあるCMSを確認してみてください！ エンジニアさんが過去に触ったことが
Cumulative Layout Shift (CLS) | Articles | web.dev
Cumulative Layout Shift (CLS) Stay organized with collections Save and categorize content based on your preferences. Unexpected layout shifts can disrupt the user experience in many ways, from causing them to lose their place while reading if the text moves suddenly, to making them click the wrong link or button. In some cases, this can do serious damage. A sudden shift in layout makes the user co
First Input Delay (FID) | Articles | web.dev
First Input Delay (FID) Stay organized with collections Save and categorize content based on your preferences. We all know how important it is to make a good first impression. It's important when meeting new people, and it's also important when building experiences on the web. On the web, a good first impression can make the difference between someone becoming a loyal user or them leaving and neve
Largest Contentful Paint (LCP) | Articles | web.dev
Largest Contentful Paint (LCP) Stay organized with collections Save and categorize content based on your preferences. Historically, it's been a challenge for web developers to measure how quickly the main content of a web page loads and is visible to users. Older metrics like load or DOMContentLoaded don't work well because they don't necessarily correspond to what the user sees on their screen. A
今日からはじめる！ WEBアクセシビリティ対応｜リクルート Air ビジネスツールズ プロダクトデザイン
こんにちは、リクルートでプロダクトデザイナーをやっているmunazoです。 私はWebアクセシビリティの対応が強く求められるプロジェクトに参加したのですが、WCAGなどの規格は初学者からすると難しく、正直何から始めていいかわかりませんでした。 Webアクセシビリティ難しすぎる問題という記事に書かれているように、私も同じようにアクセシビリティは難しいと言う印象が強かったのですが、実際にやり始めてみると、簡単に始められる事も多くあると言うことに気付きました。 この記事では、アクセシビリティに対応したいけど始められていない・・ と言う方向けに、具体例を交えて対応のポイントをご紹介します！ こう言う人向け ・必要性は分かっているけど、何から始めたらいいかわからない ・WCAGなど、難しそうな印象で手をつけられていない・・ ・自分は知らなくても、他の人がやってくれると思ってしまっているはじめにWCA
動画をWebページの背景に埋め込む時のテクニック｜notes by SHARESL
Webページの背景に動画を埋め込む時のメモ 今回はWebページの背景に動画を埋め込む時に必要なテクニックをまとめてメモ。 TOPページのファーストビューに背景動画を設置したサイトをよく見かけますが、実際に実装することになると下記のような点で悩むことがあります。 埋め込み方法（<video>タグ、YouTubeやVimeoなどの外部サイトをiframeで埋め込み） 動画の容量による負荷の問題（サーバー負荷、ロード時間） 動画上のコントロールバーやタイトルなど不要な情報の表示 ループ再生 自動再生 ミュート再生 こういった点について、動画の埋め込み方法を紹介した上でメリット・デメリットを比較してまとめてみました。 動画の埋め込み方法の比較 この記事で紹介する背景動画の埋め込み方法は下記の4つです。 直接サーバー上のファイルを読み込む（videoタグ） Googleドライブのファイルを読み込む（
Webアクセシビリティチェックに役立つフリーツール | ビジネスとIT活用に役立つ情報（株式会社アーティス）
コントラスト比チェック「ColorTester」 JIS X 8341-3:2016では、色覚障がい者への配慮として背景色と文字色のコントラストに下記の基準が設けられています。 1.4.3 コントラスト（最低限レベル）の達成基準（レベルAA） テキスト及び文字画像の視覚的提示には，少なくとも4.5:1 のコントラスト比がある。 サイズの大きなテキスト及びサイズの大きな文字画像には、少なくとも3:1のコントラスト比がある。JIS X 8341-3:2016より コントラスト比「4.5:1」「3:1」と言われても満たしているかどうかを目視で判断することは不可能です。 そこで登場するのが、コントラスト比チェック「ColorTester」です。 ColorTesterは、寄附歓迎のフリーソフトです。基本無償で使うことができます。 ColorTesterの使い方
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
中国向けサイト無料診断ツール | コスパ・テクノロジーズ｜ブランディングを極めるホームページ制作会社。英語・中国語サイトなど多言語も得意。
任意のWebサイトのスピードテストを行い、問題点をビジュアル等で細かく教えてくれる・「DebugBear Website Speed Test」
GitHub - CyberAgentHack/web-speed-hackathon-2022
500点出す！ - ゆーすけべー日記
AccessibilityCheckList
Warning! | There might be a problem with the requested link