jQueryのプラグインが面白い！スクロール時にユーザを引きつけよう
PCでも、スマートフォンでも、画面をスクロールさせた時の各パーツ等の*「動き・挙動」*というのは、ユーザーの興味を引きつける上で非常に重要な要素です。 最近では動画以外の要素にも動きをつけて表示するホームページが増えてきました。 今回は、ページ下部へとスクロールさせるごとにユニークな動きをする、簡単に設置できるjQueryのプラグインをご紹介します。デモページと併せ、「どんな動きをするか」という具体的な説明もご覧ください。 注目！スクロール時にユーザを引きつけるjQueryプラグイン12選 1. セクションが重なるようにレイヤー表示「StickyStack.js」 配布ページ｜デモ 一つひとつのセクションをレイヤーに見立て、ページトップから積み重なるように表示するエフェクト効果を実装できます。垂直に配置した各パネルを上部に固定配置しながら、積み重なるようにスクロールすることができます。言葉
CSS3のFlexboxを基本から理解して、使い方をマスターしよう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、王です。デザイナーやってます。 今回は「Flexboxを基本から理解して、使い方をマスターしよう！」ということで、初耳の方でもざっとFlexboxで何ができるか分かるように短い動画を用意しました。 動画の中で使ってたデモをアップしたので、確認してみたい方は以下のリンクをどうぞ！ デモ 昨今では、当然ながらデジタルデバイスサイズの多様化でレスポンシブデザインとやらが流行っています。 同じサイトをさまざまなスクリーンサイズに応じたデザインをしなければならない上に、コーディングにも手間がかかります。制作側からしたら何かと厄介ですよね。 「なるべく手間をかけずに作りたい！」という世界中のデザイナーの声に応えて、「Twitter Bootstrap」をはじめとした数多くのフレームワークが徐々に脚光を浴びはじめて久しくなります。 ただ、これらはあくまで古い技術の組み合わせで、革新的な技術で
CSSで計算式を可能にするcalc()ファンクション
Updated 2014.03.23 / Published 2013.10.28 CSS3にcalc()というファンクションがあるのをご存知ですか？CSSにおいて計算式を可能にしてくれる便利なcalc()ファンクションのサポート状況や使い方について紹介します。 「横幅にパーセンテージ値を用いつつ、その横幅から指定ピクセル(px)分だけ引けたら...」こんなことを思われたことがあると思います。それをCSS拡張メタ言語を使うわけでもなく、CSS単独で実現できてしまうのがcalc()ファンクションです。 参考：Mathematical Expressions: 'calc()' calc()ファンクションの実装状況 IEIE9よりサポート ChromeChrome19より25まで-webkit-のベンダー識別子付きで先攻実装 Chrome26よりサポート FirefoxFirefox4より15
複雑なコードは不要！簡単に使えるHTML/CSSジェネレーター22選
今回はWeb制作で役立つHTML/CSSを生成してくれるジェネレーターを紹介します。 CSS3の登場でより高度なアニメーションや表現ができるようになりました。一方、CSS3のコードは複雑になりがちでプロパティの使い方を覚えるのも大変です。 ジェネレーターはリアルタイムでデザインを確認できたり、GUIで簡単にデザインを調整できたりします。より効率的なWeb制作を行うために、ぜひ活用してみてください。 WAIT! Animate http://waitanimate.eggbox.io/#/ CSSのループアニメーションで遅延を挿入するのは簡単ではありません。こちらのサービスでは一時停止機能をもったループアニメーションのコードを生成してくれます。いくつかの主要なアニメーションのテンプレートが提供されており、さらにカスタマイズも可能です。 Stylie http://jeremyckahn.gi
HTML5とは何かを簡単にまとめてみた
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめに こんにちは。R＆D統括本部 制作本部 ウェブデベロップメント部に所属しております。岡部和昌（@kzms2）と申します。 最近スマートフォンやタブレット向けのページを作成する機会が増えてきました。 なので、今回はちまたで大人気のHTML5について書きます。 若干今更な内容にも思えますが、あまりHTML5になじみがない方にもわかってもらえるような内容にしています。 HTML5の基本概念や思想・実際の組み方というよりも、 HTML5で組むと今までと比べて何が違うのか などについて書いていきます。 なぜこれからHTML5なのか HTML4との違いがわからない HTML5を使う利点がわからない など疑問に思っている方はぜひ見ていた
ノンデザイナーがもっと知りたい！センスより大切なデザイン心理学のルール＋3つ
「購入ボタンは緑色がいいって専門家が言っている」「いや、Amazonのオレンジだ」なんて不毛な議論をしていませんか？ ディレクターやエンジニアにも役立つ、Webデザインで使える心理学のルールを3つ紹介します。 『ノンデザイナーこそ知っておきたい！デザインでセンスより大切な心理学のルール』では、Webサイトの成果を大幅に改善してくれる4つの有名な心理学ルールについて説明しました。今回は、色や人間の注意力持続時間、反応を研究したさらに3つの心理学ルールを紹介します。そして、ルールに沿ってWebサイトを改善し、より大きな成功を得る方法について説明します。 では、始めます。 ルール1：人間が注意力を持続できる時間は、毎年短くなっている 2015年、Microsoftは2000人の被験者を対象とする調査を実行し（調査結果PDF）、脳波記録装置を使って112人以上の人びとの脳活用をモニタリングしました
javascript-best-2016-may.html
最近のWebサイトで見かける便利な機能や面白い仕掛けのコンテンツ、気持ちいいアニメーションを伴ったインタラクションやエフェクトを実装できるCSS、スクリプトやjQueryのプラグインを紹介します。
デザインの知識を独学で身につける！デザイナー初心者が絶対に見るべきサイト20選
Webデザイナー初心者の方は、日々の仕事で知識やスキル不足に頭を悩ませる場面が多いのではないでしょうか。だけど時間もお金も足りない新人にとって、学校に通ったり、腰を据えて教科書を読んだりというのはなかなか難しいもの。 そんなときは、Web上の有益なサイトで勉強するのはいかがでしょう。今回はWebで見ることができる、教科書並の情報量のサイトや、Webデザインの参考になるサイトなど、全部で20サイトをまとめました。 Webデザインの教科書として読みたいサイトまずは、Webデザインの基本から応用まで網羅的に揃っていて、まさに教科書のように使えるサイトを紹介します。どれもブラウザに開いて常備したいサイトばかりです。 1. Webデザインレシピ ※2020年8月現在、掲載終了 一つひとつの記事にボリュームがあり、ここを読めばWebデザインについて体系的に学べる、まさに教科書のようなサイトです。サイト
SSLとは？SSL証明書の基本から購入・更新時の正しい選び方まで | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、管理部のtetsuです。 Webサイトのシステム構築をする際、サイトによってはSSL証明が必要になることもあるかと思います。 最近では、GoogleがSEOの指標の1つとして「SSL対応をしているか、常時SSLをしているか」を見るという話もあるので、SSL通信にするかどうかで悩んでいるWeb担当者の方などもいらっしゃるのではないでしょうか。 今回は、システム開発会社「エスロジカル」さんにご協力いただき、SSL証明書の基本から、購入・更新時に知っておきたい正しい選び方までをまとめました。新規でSSL証明書を発行しようとしている方や、SSL証明書の更新が迫ってきている方は、ぜひ参考にしてみてください。 そもそもSSL通信とは？ SSLとは、Secure Sockets Layer の略称で、インターネット上の通信を暗号化する技術のことです。Webサーバとクライアント（PCやスマホな
ユーザビリティ向上！「ユーザーテスト」でWebサイトを見直そう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
はじめまして。ナイル（旧：ヴォラーレ）という会社でWebアナリストをやっている伊佐敷（いさしき）と申します。よろしくお願いします。 「集客はそこそこできているがコンバージョンが増えない……」 「アクセスデータ上で数字が悪いことは把握しているが、なぜかわからない……」 皆様も同じような悩みを抱えていませんでしょうか。 そしてこの悩みの原因を突き詰めると、往々にして次の壁にぶち当たります。 「ユーザーの姿が見えない」 リアルな店舗とは異なり、Webサイトではお客様の行動・表情・気持ちを見ることができません。それゆえに、ユーザーのニーズに合わないサイトにしてしまったり、ズレた施策をおこなってしまったりして、結局成果が出ない……ということがよくあります。 しかし、Webだからしょうがないと諦めてしまうのは早いです。Webサイトを使っているユーザーの行動や心理がわかる手法が実は存在するのです。 今回
あなたの時間を無駄にする、すでに廃れた7つのSEOの手法。 - SEO Japan｜アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
今回の記事は、Quick Sproutからニール・パテル氏の記事を紹介します。今年の初めにGoogleアルゴリズムの編纂についての記事を掲載して以来、久々の登場です。掲載時期が2014年9月の記事なりますが、今後の流れをうまくまとめた内容になっています。自身の戦略を改めて考える際に、参考にしてみてはいかがでしょうか？ — SEO Japan ＊リンク先の記事は全て英語になっています。 SEOは、年を追うごとに変化しており、過去に効果があった取り組みが、今でも同じようにうまくいくとは限らない。現在利用しているその手法は、既に廃れている可能性があり、トラフィックの増加につながらないどころか、反対にトラフィックを減らしてしまう危険がある。 それでは、どうすればいいのだろうか？ この記事では、あなたが今すぐにやめるべき手法と、これから取り組むべき手法をまとめてある。下記に掲載する個々の手法を、ぜひ
第9回 Webデザイナーが押さえておくべき、内部SEO施策18のポイント - MdN Design Interactive
知ってるつもりで意外と知らないSEO最新のキホン 第9回 Webデザイナーが押さえておくべき、内部SEO施策18のポイント 2015年03月24日 TEXT：押谷圭佑（ヴォラーレ株式会社） こんにちは。ヴォラーレ株式会社の押谷です。前回はリニューアルにおけるSEOの全体感の説明をしましたが、今回はより実践的で細かな施策を紹介します。 クライアントに「いま手がけているWebサイトのSEOもお願いしたい」と依頼された経験のあるWebデザイナーや、Web担当者を兼務しているWebデザイナーは、WebサイトのSEO対策を考えたことが一度はあると思います。そうしたWebデザイナーのために、押さえておくべき18のSEO内部施策に関するポイントを紹介していきます。 ■HTMLの調整 基本的に、1ページに対して1テーマ（キーワード）として対策します。これはSEOにおけるHTMLの調整の基本であり、対策する
PCサイトのUIデザインにおける12のトレンド | ベイジの社長ブログ
スマートフォンの普及で、PCで閲覧するWebサイト（以下、PCサイト）に対する注目度は下がっています。しかし、BtoBのデジタルマーケティングにおいては、PCサイトが今後も戦略の中心になるでしょうし、BtoCにおいても、PCサイトが不可欠な領域もまだまだ多いです。 ハードウェア的に大きな変化のないPC向けのWebデザインというと、ノウハウは固定化されている印象もありますが、実際には時代の流れを受け、今も変化を続けています。特に以下のような環境変化が、PCサイトのUIデザインにも大きな影響を与えています。 表示デバイスの多用化 スマートフォンアプリの一般化 タッチスクリーンの普及 トレンドに合わせれば成功、というではありませんが、その根底に流れているユーザ動向の変化については、十分に理解しておく必要はあるでしょう。そこでこのエントリーでは、PCサイトのUIデザインにおける最新動向を、その背景
起業するときに助かる！Web制作者が独立するために必要なまとめ - コムテブログ
TL;DR 筆者が起業するまでに必要だったことや流れ。今回は簡易的な情報となっていますが、知っておくとフリーや起業前に役に立つことをまとめます。起業から少し時間が経ったので記憶があいまいですが、ざっくりとした流れと気をつけておきたいことをメモしています。 創業前に準備すること 起業前に事業内容と企業理念を決定し、会社案内資料をパワポで作成しておきます。内容は企業理念・事業内容・解決できること・会社概要など。 １．定款作成前 定款作成前に準備しておきたいこと、事務所について調査しておくべきことのリストです。実印・銀行印・角印・ゴム印に関しては司法書士さんに社名の重複がないか調べてもらった後に作成します。 事業所物件候補を見つけたら、不動産屋に連絡 回線がひけるかどうか聞く 改装可能か、どこまで改造出来るか聞く 計画している事業内容で賃貸可能か確認 信用審査があるので待つ 審査 OK でテナン
ネット広告のクリック数のうち88～98％はボットによるものだと判明
By Tony Kwintera ウェブ上に表示されている広告を一体誰がどれくらいクリックしているのか明らかにするため、Oxford BioChronometricsの研究者であるアドリアン・ニール氏とサンダー・コーウェンホーヴェン氏は、2015年1月の7日間、Google・Yahoo!・LinkedIn・Facebookといった主要な広告ネットワーク上での広告クリック調査を実施しました。この調査の結果、広告クリックの88～98％がボットにより行われていることが明らかになりました。 OxfordBioChron_Quantifying-Online-Advertising-Fraud_Report.pdf (PDF)http://oxford-biochron.com/downloads/OxfordBioChron_Quantifying-Online-Advertising-Fraud
保存版！CSS3で出来る素敵なデザインやアニメーションをまとめてみた
主要ブラウザで使うことの出来る「CSS3」ですが、IE8に対応していないためにCSS3の基本や使い方は知っていても実務等では使う機会が少なかった(クライアントワークではIE8が対応ブラウザに含まれていたため)方もいらっしゃると思います。そうするとふと「あれ、あのプロパティはどう使うんだっけ？」とか「この要素だけにスタイルを適応するCSS3は何だっけ…？」など忘れてしまうこともしばしば…。 最近ではIE8のシェアは低くなり、またスマホサイト制作の機会も増えたためクライアントワークでもCSS3を活用したWeb制作が増えてきました。そこで今回は、まず覚えておくと便利な機能の復習とそれを応用し「これCSS3だけで作れるの!?」というような驚きの作品の数々をまとめてみました！ CSS3とは そもそも「CSS3」とは何のことでしょうか。改めてその定義を確認してみましょう。 「CSS」は、ウェブページの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WEBサイトを収益化する「最小限のWEBデザインと時間投資」とは | コピーライティングマーケター「一式未来」知の源泉
フリーランス・個人事業者向けの「ビジネスモデルの作り方」｜写真と映像カメラマン｜"やまかず" OFFICIAL BLOG
https://geechs-magazine.com/tag/lifehack/20161115_3
自然をイメージさせる配色のカラースキーム | Web カラー 配色パターン 一覧リスト | iso.labo
