HTTPリクエストを減らすために【序章】HTTPリクエストは甘え - MOL
このシリーズはHTTPリクエストの理解を通じてWebパフォーマンスの重要性について考える5章構成になっている。 【序章】HTTPリクエストは甘え 【CSS Sprite編】スプライト地獄からの解放 【WebFont編】ドラッグ＆ドロップしてコマンド叩いてウェーイ 【DataURI編】遅延ロードでレンダリングブロックを回避 【終章】我々には1000msの猶予しか残されていない 1日目は、HTTPリクエストの概要について説明する。 例えに、私のポートフォリオページ（t32k.me）が表示されるまでの流れを見ていく。まず、検索からでも方法はなんでもよいが、ブラウザのURLバーにt32k.meと打ち込んでアクセスする。そのページを見にいくということは、つまりt32k.meに対してHTTPスキームでリクエストするということを意味している。 クライアントであるブラウザは入力されたURLを判断して、リソ
AWSアカウントを作ったら最初にやるべきこと 〜2021年版〜 #devio2021 | DevelopersIO
ログ・モニタリングのやるべきこと AWS CloudTrail の設定 CloudTrail は AWS リソースを「誰が」「いつ」「何に」対して「どうような」操作をしたのかを記録するサービスです。 ログの長期保管の設定をしておくことで、トラブル発生時の解析等に利用できます。 有料です（無料利用枠もあります） [YouTube] AWS CloudTrailを触ってみた CloudTrail Insights を利用することで、機械学習により異常なアクティビティを検出することもできます。 ログは S3 と CloudWatch Logs に転送でき、S3 に保管しているログは Athena により検索することもできます。 Athena を利用する場合は、事前に CloudTrail 用のテーブルを作成しておき、検索方法を習熟しておきましょう。 インシデントが発生してから習熟では対応が遅くな
Webサイト制作をどれくらいの粒度で分解してタスク化するか｜重松佑 / Shhh inc.
プロジェクトが始まるときにかなり初期の段階でWBSを作ることは多いとおもいます。そのWBSの作成、プロマネやディレクターに任せっぱなしになっていないでしょうか。WBSはスケジュールをガントチャートで表したものを指していると思われがちですが、実はスケジュールだけでなく見積もりやアサインを精度高く行うためにも重要なものです。 たとえば「Webデザイン作成」というスコープにどのような実作業が含まれているかはWBSを作ることによって見える化しプロジェクトメンバーやクライアントと共有できるようになります。ときどき下記のように書かれたWBSを見ることがあります。 Webデザイン作成 ・作成 ・確認 ・修正 ・確認2 ・修正2 ・確定 しかし、これでは「Webデザイン作成」に必要な知識、さらには作業量・スケジュール・予算も分かりません。Webデザイン作成の例を続けると、下記のように「作成」のスコープを分
成功法則が詰まったBtoBサイトの標準ワイヤーフレームを無料配布します | knowledge / baigie
約1年前、BtoB企業における顧客獲得型サイトの勝ちパターンをまとめた『BtoBサイト・チェックリスト』を、ベイジ、才流さん、WACULさんの3社連名で発表し、大きな反響をいただきました。 このチェックリストはブログで公開しただけではなく、私たちのウェブ制作の現場でもフル活用されています。この1年間に手掛けた多くのBtoBサイトが、このチェックリストを満たすように設計され、多くのBtoBサイトでコンバージョン数/率やフォーム誘導数/率の向上など、ポジティブな変化が生まれました。 このような活動の中から、『BtoBサイト・チェックリスト』の内容を満たした『BtoBサイト・ワイヤーフレーム』なるものが誕生しました。これを今回、皆さんにご提供します。リード情報なども一切取らず、そのまま丸ごとお渡しします。 BtoBサイト標準ワイヤーフレームXD版（770KB） BtoBサイト標準ワイヤーフレーム
ついに出た！2021年注目のWebデザイン人気トレンド9個まとめ
この記事では、これから2021年に注目したいWebデザインの人気トレンド9個をピックアップしています。 2021年のウェブデザインの傾向としては、どれも共通のテーマがあるように見えます。ハイテクなファンタジー感を目指すのではなく、よりリアルさを求めた新しいジャンルに世界中のウェブデザイナーが注目し始めています。 2021年のWebデザインは、これまでにないほどデジタルと日常を融合する方向に向かっており、普段の生活においてWebサイトが不可欠になってきていることを、反映しているのかもしれません。 よりクリエイティブなデザインを表現できるテクニックを、たくさんのデザイン事例と一緒にご紹介です。 コンテンツ目次 1. パララックス・アニメーション 2. ニューモーフィズム 3. アブストラクト・アート 4. 目にやさしい配色 5. 原因のためのウェブサイト 6. スクロール遷移 7. プロダクト
All in One SEOの設定方法と使い方
WordPress を使うなら、初心者にとって必須と言えるプラグインがいくつかある。その中でも、All in One SEO は非常に重要度が高い。 なぜなら、このプラグインは、WordPress の集客を成功させるために欠かすことのできない SEO のメタ要素の設定ソーシャルメディアの拡散効果を上げる OGP の設定クローラーの巡回を促す XML Sitemap の設定という３つの設定を一挙に担っているからだ。 ここでは、そんな必須プラグインである All in One SEOの効果的な設定方法と使い方をご紹介する。この記事に書いている通りに進めて頂ければ全く難しいものではないので、安心して読み進めて欲しい。 １．All in One SEOとはAll in One SEOとは、Wordpressでサイトを運営するときに必要となるSEOの設定を簡単に行ってくれるプラグインだ。 まずはAl
スクロールについてくる要素とその可動範囲の指定。あれ？この場合ついていかない要素ってことになるのかな？ | Memorandum Book - written by Ravenala
長いページをスクロールしているとサイドメニューなどが見えなくなるときがありますよね。その場合、他のページに移動するにはヘッダーもしくはフッダー、サイドメニューの見える位置までスクロールしないといけません。結構、嫌になるときがありますよね。。。それを解消するには、ページのどの位置にいてもメニューが見えていればいいのです。簡単ですね。そう、お気づきのとおり「 position: fixed 」です。ただ、メニューの位置を初期位置のまま固定する仕様だとデザインの幅が狭くなりますので、指定した範囲を超えたら固定にするとかにしたほうがいいですね。 スクロールについてこなくなる（位置固定になる）要素を「div.menu」とすると。 html <div id="main"> <div id="column-left"> <div class="menu"> <ul> //省略 </ul> </div>
OGP画像シミュレータ | og:image Simulator
OGP画像シミュレータとは？ FacebookのOGP画像は正方形で表示されたり横長で表示されたりするため、デザインがとても大変。 そんな時に便利なのがこのOGP画像シミュレータ。 デザインしたOGP画像をドラッグ&ドロップし、タイムライン上でどう見えるかシミュレートしてみましょう。 https://ogimage.tsmallfield.com/ 1200 x 630 px 以上推奨 https://developers.facebook.com/docs/opengraph/creating-object-types/#properties 最低でも 600 x 315 px、また大きければ大きいほど良いため 1200 x 630 px 以上の画像サイズが推奨されています。画像がクリッピングされるのを防ぐため、縦横比をなるべく1.91:1に近づけるようにしましょう。 （2014年01月
ピクセルパーフェクトは必要なのか？ HTMLコーダーの考え方まとめ
平尾誠@ARUTEGA.Inc @Makopontass コーディングを外に出すことが増えてきた。 やはり経験値が少ない人の品質管理は大変だと感じつつも、しぶとくピクセルパーフェクトを狙ってくる方に仕事を任せてよかった。 この再現性への執着心がないと伸び代を感じれない。 2020-09-20 00:34:07 吉本 集 / aru inc. @tsuDoi220 いやー、実際そうなんですよねー。 ピクセルパーフェクトに、そもそも拘っていない人に、仕事お願いしたくない。テクニックどうこうより、全然こっちのほうが大事。ほんとに。 後、速度とちゃんと納期守ること。 当たり前のようだけど、意外とね、、、 twitter.com/makopontass/st… 2020-09-20 00:45:27
HTML5時代のネット動画技術〜良い子悪い子普通の子（増補改訂版）
サッポロクリエイティブキャンプ 2016 #3で使った資料を増補改訂したものです。HTML5 VideoとかHLSとかDASHとかのことについてです。
カラーユニバーサルデザイン推奨配色セット
色覚の多様性に配慮した�案内・サイン・図表等用のカラーユニバーサルデザイン�推奨配色セット （バリアフリーに配慮した見分けやすい色の組み合わせ） カラーユニバーサルデザイン推奨配色セット制作委員会 ■ 東京大学分子細胞生物学研究所 脳神経回路研究分野 伊藤啓 ■ 社団法人日本塗料工業会（JPMA） ■ DIC 株式会社（DICグラフィックス株式会社・DICカラーデザイン株式会社 ■ 特定非営利活動法人カラーユニバーサルデザイン機構（CUDO） ■ 石川県工業試験場 前川満良 カラーユニバーサルデザイン推奨配色セット ガイドブック 第２版 カラーユニバーサルデザイン推奨配色セットの塗料用、印刷用、画面用の詳しい情報と、組み合わせる色の注意点、使用する上でのノウハウなどをまとめた冊子の第２版を作成しました。 CUD_color_set_GuideBook_2018
Webパフォーマンス虎の巻
Webパフォーマンス向上施策のために、今更ながら超速本1を読んだので、今までの自分の知見と合わせてまとめてみます。 なるべく柔らかく、**改善施策ってまず何をどうすればいいの？**という疑問を持った人に向けて書いています。 ▪️格言 そもそもWebは速い。遅くしているのは我々です。大抵は技術の問題ではなくて、人の問題。 引用元： テクニックではなく、今、本気で取り組むべきWebパフォーマンス （html5jパフォーマンス部 部長 竹洞さん） 心得 パフォーマンス向上に対する施策は大別すると以下の２通り 軽量化 （単純にやりとりするデータ容量を小さくすること） 圧縮 削除 最適化 （その時に最も適している実装・実行をとること） 経路・順番の変更 非同期 もっとも遅くしている原因を探して、それを対策するのが原則。「対効果」が絶対的正義である。手段から入るのは愚策。まず先に原因を知ることが重要。
無料でダウンロードできる洗練されたデザインのUIキットいろいろ
わかりやすく、統一感のあるウェブサイトをデザインする時にあると便利なのがUIキットですが、ウェブ開発・デザインに関する情報やコンテンツを扱うブログBest Open Source Resourcesがそんな美しいデザインのUIキットをリスト化しています。明るいグレーやダークなカラー・木目調など、さまざまなパターンのPSDファイルが無料でダウンロードできるため、頭の中のイメージに合わせてコンテンツを選ぶことが可能です。 A Comprehensive Collection of Free UI Kits & Templates | Web Resources | WebAppers http://www.webappers.com/2012/11/12/a-comprehensive-collection-of-free-ui-kits-templates/ ◆01："Pizza" UI K
WordPressでブログ以外のサイトを作る 〜カスタム投稿タイプやカスタムフィールドの使い方〜
26. News 記事 イベント EVENT 投稿 Home Gallery 作品 About 固定ページ Contact
四畳半ワークス+1.5
とある六畳間で印刷物を作ったりWEB的な何かをしていたり、物思いをしてみたり、嫁様の目を盗んでtwitterとかしてたりします。
「サドは一芸を極め、マゾは多芸に通じる」ディレクターの性格と案件のマッチング : LINE Corporation ディレクターブログ
こんにちは。来月40歳になるヤング谷口です。 これまで約15年Webディレクターをやっており、優秀かどうかは置いといて、関わった案件の“バラエティ”だけは、誰にも負けない気がします。誇ることでもないんですが。 15年を振り返って思ったのは、Webディレクターの領域は広いため、その人の性格に合う案件に次第に向かうようになる、ということです。性格と案件が合わないと長くもたないからです。図にするとこんな感じです。 今回はこちらを解説していきます。ちなみに赤い矢印は私の歩んできた履歴です。 ■ どこまで飽きっぽい性格か？ まず横軸の「ロングスパン、ショートスパン」は、一つの案件にかかわる長さです。これは、その人の飽きやすさの程度に関係します。 例えば建設でいうと、青函トンネルは開通するまでに27年かかっています。これを例えば、高田純次のような、飽きっぽそうな人に任せることはできません。本人も地獄で
WEBから実店舗への集客は本当にできるのか、具体的な実証例です(秘)｜More Access! More Fun
わたし、月315円の有料メルマガというのを５月くらいからやってまして、質問をいただいてそれに答える形を取ってます。でもって最も多い質問の一つが「実店舗へ顧客を誘導するのにWEBはどう使えばいいか」っていう系統です。 はっきり言って飲食店等ではぐるなびや食べログは今や必須。かといって他店もみんなやってるのでこれやれば客がいっぱい来るかというとそんなことはないです。お金さえ払えば誰でもできるこれらのサービスは、敷居が低くて他と差が出ません。誰でもできるもので差が出るわけないのですよ。オリンピックに出るにはフツーの人と同じことしているだけでは全然ダメというのと同じです。 ましてや飲食店以外の小売店やサービス業の一般店舗では、食べログみたいな強力な比較サイトも無いわけで、これでナニもしないで「景気が悪い」ってぼやいていても意味ないわけです。 金があるなら金使え 金が無いなら頭を使え 頭も無いなら手
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ホーム | WEB制作のDesign24℃（デザインニジューヨンドシー）
クライアントに突っ込まれにくいホームページリニューアルの見積もりの仕方
http://jetbulls.com/