拝啓、お客様。Webサイト制作のコストはここにかかります。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
令和ですね。こんにちは。バックエンドエンジニアのまさくにです。ゴールデンウィークで休んでいたら、シュワシュワと筋組織が融解し、「自然に帰ろう……自然に帰ろう……」と遺伝子に刻み込まれた内なる声が僕を光射す方へ誘いました。もはや社会復帰は難しいかもしれない。 さて。さてさて。 皆さま、いかがお過ごしですか。新しい期に入り、心機一転したい気持ちでしょうか。何ならアレですか。お持ちのWebサイトをリニューアルしたい、そんな気持ちをそろそろお持ちでしょうか。 失礼ながら、そのお気持ち、 たぶん5ヶ月、遅いです！ 仕事としてWebサイトの制作に携わってから、5年くらいが過ぎました。現在はバックエンドの作業を行いながら、TD（テクニカルディレクション）やPM（プロジェクトマネージャー）として、プロジェクトに関わることも増えてきています。その観点から言って、お客様と我々の間には「Web制作」の考え方にお
「え？それそんなかかるの？」簡単そうに見えて案外時間のかかるWebサイト上のJavaScriptあるある仕様8選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
多！ そのため、仕様の洗い出しが不十分になりがちになる、という点で厄介です。 ただし、今はSwiper, Slickといった優秀なプラグインがあります。こいつらは大抵の仕様は満たしてくれますので、積極的に使うと良いと思います。 参考 Swiper Slick フィットスクロール 厄介度：★★★ 紙芝居スクロールなどといったりもします。 海外のオサレなブランディングサイトや、ランディングページなんかでたまに見かけますね。 カッコイイ！うちもこんなんやりたい！と思うかもしれません。がしかし…… イメージ ハマりポイント スクロールに関する他の機能実装 これを実装する場合ブラウザにデフォで備わっているスクロールは使わず、別の方法（CSSのtransformとJSを組み合わせるなど）で実装することになるかと思います。 するとまず、スクロールイベントが取れないんですね。 そのため、スクロールに合わせ
ウェブサイトをもっと面白く！コピペ可能なHTML/CSSスニペット75個まとめ 2018年7月度
ウェブ制作で差がつくテクニックをつかった、コピー&ペーストで利用できる HTML/CSS スニペットをまとめてご紹介します。2018年を代表するグラフィックデザインのトレンドでもある、グラデーションやグリッチエフェクト、ちょっとした動きが魅力的なマイクロインタラクション、CSS Gridプロパティの実践的な使い方など、今後のウェブサイト制作で参考にしたい作品を中心に揃えています。 「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。これらのスニペットを利用することで、他とは一味違うユニークなウェブサイトを制作してみましょう。 Webサイトを使いやすく！
【2018年度決定版】レスポンシブデザインのブレークポイントはこれで決まり！
こんにちは（・∀・） 以前【Labs】レスポンシブデザインのブレークポイントは！？でブレークポイントをいくつも作ると管理が大変だからメジャーブレークポイントを一つ作って... という投稿をしましたが、 全部じゃなくてもいいので、現在市販されているデバイスサイズをなるべくカバーしたい...というお願いを受けることもあると思います。 今日はそんなオーダーを受けた時にピッタリ、ブレークポイントを細かく設定してみます。細かくと言っても今回作ったブレークポイントはたったの10個です。 あ、やっぱりちょっと多いですか⁉️ でもご安心ください。メジャーブレークポイントは1つです。 それでは最初にサンプルをご覧ください。ブラウザサイズを変えると見出しの後ろに指定してある画面サイズが表示されます。 Result サンプルデモはこちら モバイルファーストでCSSの記述していきます。@mediaで囲われていない
copypet.jp｜パーツで探す、web制作に使えるコピペサイト。 - CSS3などで新たに追加された要素･装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。困った自分用のストックブログ
免責事項 当サイトのすべてのコンテンツ・情報につきまして、可能な限り正確な情報を掲載するよう努めておりますが、必ずしも正確性・信頼性等を保証するものではありません。 当サイトの情報によるいかなる損失に関して、免責とさせて頂きます。ご利用の際はあらかじめご了承ください。 本免責事項、および、当サイトに掲載しているコンテンツ・情報は、予告なしに変更・削除されることがあります。予めご了承下さい。
「SPFレコード」とは？SPFレコード設定方法とメリットについて
メルマガを配信したのに、相手に届いていない？「メルマガを配信しても相手に届かず、エラーになってしまう」 「配信したメルマガが迷惑メールフォルダーに入っているみたい」 という経験はありませんか？ もしかすると、そのメール、なりすましメールと判定されているかもしれません。 ※なりすましメール…メールの配信元を偽装して配信しているメール なりすましメールと判定された場合、メルマガを受信する環境によっては、受信サーバ側で受け取りを拒否されたり、迷惑メールフォルダーに入る可能性が高くなります。 なりすましメールの規制に対応する為には、「SPFレコード」の設定が「差出人(From)メールアドレス」側で必要となります。 「SPFレコード」とは、メールの配信元サーバーが偽装されたものではないと証明する仕組みのことです。 配信したメルマガが迷惑メールフォルダーに入ってしまう、携帯キャリアメールに一斉配信メー
医療広告ガイドラインによる広告規制について - ゼロメディカル
『医療広告ガイドライン』には、医療機関のウェブサイトに対して、虚偽や誇大広告を禁止する規制があり、違反した場合の罰則が規定されています（厚生労働省HP「医療広告ガイドライン」）。そのため、該当する施設のウェブサイトでは慎重な対応が求められます。 医療機関ホームページが “広告”になるまでの経緯 2017年6月に公布された医療法の改正内容は衝撃をもって受け止められました。これまで広告とは見なされず、比較的自由に情報を発信することができたウェブサイトが法的規制の対象になることが盛り込まれていたのです。 人の生命や健康に関わる医療行為を広告することは、『医療法』によって厳しく規制されています。テレビCMやチラシ、看板などでは医師名や診療時間など限られた項目についてしか広告することが許されず、表現がオーバーになっていないか各自治体の衛生主管部が厳しく目を光らせていました。 一方のウェブサイトはと言
userAgentでブラウザ＆デバイス判別 2017年版 - Qiita
ブラウザのUserAgentを調べて、ユーザーのブラウザ名・バージョン・デバイスの種類を判定するJavaScriptライブラリをアップデートしました。CSSでの場合分けに使えるように、Modernizrっぽく <html> タグのクラス名に判定結果が追加されるようにしてみました。 よりよい方法やバグ等ございましたら、アドバイスいただけると光栄です。 ソースコード ちなみにおいらのコードはとても汚いです。 Githubにも置いておきますね → Github - UserAgentChecker.js // ------------------------------------------------------------------------------- // User Agent Checker // ----------------------------------------
CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
今回は見出し（h1〜h6タグ）のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。
ウェブ制作にはWebStormがお勧め！ 使いこなせば操作が爆速になる機能のまとめ - ICS MEDIA
みなさんはウェブサイト制作で、どのテキストエディターを使用していますか？ 弊社ではHTMLやCSS、JavaScriptを扱うウェブ制作ソフトとして「WebStorm（ウェブストーム）」を全スタッフが利用しています。WebStormは有料のソフトウェアですが、日本語に対応しており、ウェブ制作に役立つ機能が豊富に搭載されていて値段以上の価値があります。 今回はWebStormの魅力について、「WebStormの概要」、「ウェブ制作に便利な使い方」、「コードリーディングに重宝する機能」、「コーディングの助けになる機能」の4点から紹介します。 ※本記事はWebStormの内容ですが、開発元のJetBrains社が提供しているIntelliJ IDEAやPhpStorm、その他のIDE（統合開発ソフト）で同様のショートカットや機能を使用できます。 本記事は初心者向けの内容ですが、続編記事「使用歴5
資生堂Webマスターが考える企業サイトリニューアルのポイントは「ユーザビリティ」と「美」 | 稲富滋のWebマスター探訪記
木村さんは資生堂のグループ企業情報サイトのオーナーで、リニューアルを実施するに当たって、企業サイトの役割を次のように定めました。 目的をもってサイトを来訪してくれた人へ「目的の情報」と「資生堂のアピールしたい情報」を伝えること。 つまり、資生堂の企業サイト ＝ 資生堂グループの「姿勢を伝える顔」ととらえて、リニューアルを実施しました。そこで、リニューアルのポイントとして次の3つを掲げました。 ポイント①「知りたい人」に「知りたいこと」を早く、正確に伝えるリニューアルで最初に掲げたことは、目的となる情報への「導線強化」です。 「グループ企業情報サイトへの訪問者は、キャンペーンなどで呼び込まれるのではなく、目的を持って自らの意思で訪問して来てくださる方です。この方々の目的に沿った情報をきちんと提供できることが大切です」と木村さんは言います。 ポイント②「資生堂らしさ」、それは「美」2番目のポイ
進化するレスポンシブWebデザイン 「SGDD」とは何か？ (1/2)
「レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック」という書籍を2013年に上梓して2年が経ちました。この間、レスポンシブWebデザインも大きく進化しています。中でも、スタイルガイドを利用した制作アプローチは、レスポンシブWebデザインにおける新たな主流となりつつあります。 スタイルガイドとは スタイルガイドとは、ボタンや見出しといった、Webサイトを構成する部品の集合場所のことです。クライアントを含む案件に関わる全員が参照することで、それぞれのパーツがブラウザー上でどのように表示されるのか、どのように挙動するのかを確認できるようにするものです。デザインパーツや挙動を最終工程で確認する前に関係者間で共有できるのが大きなメリットです。 このほかにも、スタイルガイドには以下のようなメリットがあります。 生成されたCSSの集合体は他のページでも動作が可能 CSSの数は少なく
【生存戦略】20代のWebデザイナーが身につけるべき15のスキル一覧 - paiza times
Photo by Matthew Pearce 今回のpaiza開発日誌は片山がお送りします。 皆さんはWebデザイナーがどんな仕事をする人か？という事を明確にイメージ出来るでしょうか？ 最近、弊社でWeb/UIデザイナーを採用する事になったのですが、求人の要件を固めていくにあたって、そもそもWebデザイナーって、どんな経験を持った人を指すんだっけ？というのが曖昧だったので、Webデザイナーのキャリアパスと、15分野のスキル一覧を書き出してみました。 現在20代のWebデザイナーだという方が、今後のキャリアを考える際にもちょうど参考になりそうな物になったので、せっかくなので公開してみようと思います。Webデザイナーからどのような職種にキャリアアップ出来るのかと言う事と、そのために必要な経験を15分野にまとめてみました。 企業がWebデザイナーを採用する際の求人要件定義にも使えるかと思います
小さいメーカーのウェブ活用～リニューアルから1年の振り返り
会社のウェブサイトをリニューアルオープンしたのが昨年の5月22日。 1年が経過したので、振り返りとかをしてみようと思います。 このグラフを見て頂ければわかるように、リニューアルしてから、この1年でセッション数はありがたいことに右肩上がりの増え続けています。 この直近1ヶ月の前年対比の数値で見ると、セッション数で20倍、ユーザー数で23倍、ページビューで約5倍という結果になりました。リニューアル前のセッションやページビューがそもそも低かったということもありますが、ここまで伸びるとは正直思ってはいませんでした。 セッション数やページビューが劇的に伸びた分、一人当たりの平均PVは、5.51⇒1.47、平均セッション時間が3:46⇒50秒、直帰率は50.32%⇒84.37%と、このあたりの数値に関してはかなり悪化しました。 セッションやユーザー数、セッションなどが劇的に伸びたのは、ブログを開始した
パソコンで中国語を入力する方法 | どんと来い、中国語
Windowsには、中国語を入力するためのIMEというツールが無料で備わっています。少し設定を変えるだけですぐに中国語を入力できるようになります。 ここでは、WindowsXPを例にとって説明します。 （Windows8の場合はこちら） （Windows7の場合はこちら） （Windows Vistaの場合はこちら） １．中国語を入力するためのツール（IME）をインストール コントロールパネルの中の「日付、時刻、地域と言語のオプション」を開きます。 その中にある「地域と言語のオプション」を開きます。 （設定がクラッシックの場合はコントロールパネルの直下に「地域と言語のオプション」があります。） 続いて、言語タブをクリックし、詳細を開きます。 追加ボタンをクリックします。 入力言語に「中国語（中国）」 キーボード レイアウト/入力システムに「Chinese(Simplified)-Micro
フリーランスWebデザイナーという職業も無くなる4つの理由 デザイン会社 ビートラックス: ブログ
全ての事柄のデジタル化が進む中で、Webやインターネットの重要性が年々高まっている事は間違いないだろう。それに伴い、関連する業種や職業に対する需要が高まるのは必然と考えられる。 例えばWebやアプリを製作する為のデザイナーやエンジニアは、紙媒体や組み込み型ソフトウェア向けのそれに比べても必要性が格段に高いとされ、キャリアアップをする場合は新しい技術の習得が求められる。 その一方で、以前に「アメリカでWeb制作会社が存在出来ない5つの理由」で説明させて頂いたとおり、実はこちらサンフランシスコ、シリコンバレー地域では、”Web制作” をメインのビジネスとしている会社はかなり少ない。 むしろ、数年前からビジネスのコアを変換させなければ生き残れない時代に入って来たと言っても間違いないだろう。 絶滅するフリーランスWebデザイナーという職業それでは、フリーランスのWebデザイナーはどうだろうか？We
アメリカでWeb制作会社が存在出来ない5つの理由 | freshtrax | btrax スタッフブログ
恐らくWeb制作会社として続けていたら、とっくに潰れていただろう。 昨日、アメリカでのWeb制作会社、及びWebマーケティング会社の事情について聞かれた。昨今の市場と自社の状況をふまえ思わず上記の通り答えてしまった。 我がbtrax社は創立当初は”ごく普通”のWeb制作会社として業務をスタートした。 それから数年はサンフランシスコのオフィスでアメリカの会社に対してサイトを作る、ただそれだけの会社であった。 その後、市場の変化を中心に様々なファクターが理由で気がつけば現在のクロスボーダーを特徴としたサービスデザインや、ブランディングをサービスの中心にする様になった。 恐らく日本ではいまだビジネスとして成り立っている、Web制作・システム開発・Webマーケティング業務であるが、残念ながらここアメリカでは一つの企業としてそのようなサービス”だけ”で生き残って行くのはかなり不可能に近いと思っている
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IE11とEdgeだけおこる不具合を調査した話 ｜doda Creator's Blog
今こそ、乱立する複数のWebサイトを「Webガバナンス3.0」で統合管理 | 【レポート】Web担当者Forumミーティング 2017 Spring
JAL、資生堂、貝印が明かすサイト制作・リニューアルの秘訣／第2回Webグランプリフォーラム 中編 | Web広告研究会セミナーレポート
