パララックスを使ったストーリー性のあるWebサイトまとめ | Goodpatch Blog
昨年度からWebサイトに取り入れられ始めたパララックス効果、現在でも取り入れられているWebサイトをよく見ます。実際にパララックスが取り入れられているWebサイトを実際に触って興味を持ったり、作成された方もいるのではないでしょうか。参考にできるパララックスを使ったサイトはたくさんありますが、今回はパララックス効果を上手く取り入れ、ストーリーを印象的に伝えているサイトをまとめてみました！ （参考: 15 Awesome Websites That Tell a Story As You Scroll） Every Last Drop http://everylastdrop.co.uk/ 私たちが起きてから寝るまでに使う水の量が視覚的にわかるWebサイトです。 Ben the Bodyguard http://benthebodyguard.com/index.php 写真やメモ管理アプリの
日本人クリエイターのハイセンスなポートフォリオサイト（主にフリーランス）まとめ
rumiko matsumoto / TAKESHI WATAMURA | 綿村 健 / SCANNER™ | a design &...他...全23件
合字（リガチャ）が美しいフォント7選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのサリーです。はじめに言っちゃいますと、今回紹介するフォントは１つを除いて全て有料です。。。 でもフリーではなかなか見つからない買う価値アリのフォントばかりなので、まずは見るだけはタダと思って読んでもらえると嬉しいです。 合字（リガチャ：Ligature）とは 「合字」ってご存知ですか？（私はつい最近知りました…）2つ以上の文字を1つの文字に合体させたものを合字といいます。 「ff」「fi」「fl」など、読みやすくするための代表的な合字はお馴染みのヒラギノやメイリオにもちゃんと用意されています！ こちらはちょっと変わった合字。 「LA」などのカッコイイ合字は普通のフォントには収録されていません。 フリーフォントで色々検索してみたものの、合字がたくさん用意されているものは残念ながらほとんど見つかりませんでした… 有料だと美しい合字がたくさんあるので、紹介したいと思います
HTML5＋CSS3の「カンタン装飾設定」で今風デザイン
基本的にグラデーションや角丸はジェネレータからコピペして設定できるので、作業自体は簡単です。HTML5＋CSS3サンプルを使って表現してみましょう。 （1）装飾のキモは「グラデーション・線・角丸・影・テクスチャー」 前回HTML5＋CSS3の「レイアウトを自在に使いこなす」では、限られたいくつかのCSSプロパティを組み合わせて、さまざまなレイアウトができることをお見せしましたが、今回はそれに装飾を加えていきます。 いざ装飾しようとすると、どこから手を付ければ良いのか迷ってしまうかもしれませんが、アイコンなどの絵を除けば、装飾の要素は「グラデーション」「線」「角丸」「影」「テクスチャー」くらいなものです。それらを整理して組み合わせることで、全体として一体感のあるデザインに仕上げられます。 「それが難しいんだよ！」というお叱りの声が聞こえてきそうですが（笑）、以下の2つを見比べてみましょう。上
その場でサクッとiPhoneやiPad等の幅でWebサイトの表示確認が出来るレスポンシブWebデザインの補助用ブックマークレット・Resizer - かちびと.net
ここ何日かずっとレスポンシブWebデザイン のネタが続きますが・・便利なブックマーク レットです。閲覧中のWEBサイトをiPhoneや iPadの幅で見たときの表示状態で確認出来る ブックマークレットです。というか単純に リサイズしてくれる、ってやつですね。 その場でレシポンシブWebデザイン対応の表示確認が出来るブックマークレットです。UAの切り替えとかじゃなく、単純にリサイズするだけですが、シンプルで手軽に表示確認出来るので使おうかなと思います。 地味に便利でした。使い方・・・の説明は不要だと思いますが他に書くこと無いので一応ｗ ブックマークレット使うと右上になんか出ます。 あとは好みのデバイス選べばその場でリサイズされます。Webサイトのほうで背景色を決めてないとオーバーレイの色に依存しちゃいますけど。 でもこのブックマークレットはGithubでコードが公開されてますので好みのブック
UXを学ぶならこれだけは目を通しておけ！ - UX-design
2013-04-11 UXを学ぶならこれだけは目を通しておけ！ UXとはなんぞや!?って日々思いながら手探りでUXを意識したサービス開発、UXの向上を測っております、どうも @tacumacy です。 ボク自身、UXのことはなんとなーくわかってはいましたが、本格的にそれを仕事としてやろうとなった時から本気で勉強しなきゃやばい！と思い猛烈に危機感を感じたので、めちゃくちゃネットサーフィンをしてUXに関する情報を集めては読みまくりました。そこでボクが読んで参考になった書籍や記事を、どうせならここでまとめて見れるようにしておこうと思います。もし勉強したいな、と思ったときに見ていただけると幸いです。 こんな人に読んでほしい ・これからUXを学びたいと思っている人 ・UXについて、手っ取り早く情報が欲しいと思っている人 書籍紹介 以下、これだけは頭に入れておきたいなぁと感じた内容をまとめてくださって
テキストと背景のカラーがアクセシブルかチェックし、適した組み合わせに調整できる便利ツール -Contrast Ratio
テキストと背景のカラーの組み合わせで、視覚的にどのくらい読めるか数値化するオンラインツールを紹介します。 いまいち読みにくい時には、ツールで最適な組み合わせに調整することもできます。 Contrast Ratio Contrast Ratioの使い方は、簡単です。 入力欄の左に背景、右にテキストのカラーを入力するだけで、すぐに反映されます。 カラーは、hsla, rgb, 16進数などに対応しています。 当サイトの背景とテキストのカラーを入力してみます。
構造はHTML、装飾はCSS、動きが欲しければJavaScript 静的サイトの成り立ちを理解する
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
約400種の欧文フォントが全部無料（商用可）でWebFontも使えちゃうFont Squirrelって素敵 / Maka-Veli .com
もう数年前にコリスさんやCREAMUさんで紹介されてましたが、恥ずかしながら知らなかったです。こんなに素敵なサイトがあったなんて。 最近DesignModoで紹介されていたので知りました。 すげー関係無いけどCREAMUさんのブログ超好きです 全部フリー 基本的には全て商用可。だそうです。 100% Free For Commercial Use. ただしフォントそれぞれにライセンスはあるので一応、要確認。 とても探しやすく、種類も豊富。400近くはあるんじゃないでしょうか？ 個人的には探しやすい点がとても気に入りました。 そしてもう一つ素敵なコンテンツがあったのですが Webfont kit がDLできる。そして作れる。 うちのサイト名やナビゲーション等に@font-faceでLeague Gothicを使ってますが、この@font-faceでwebfont使う時に必要な
WEB制作時に役立つ！ダミーテキストに使える定型文まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
先日、弊社プログラマーの段田さんのブログで、ボーナスアップの道具として利用された野田です。 あれは、久しぶりに傷ついた。 そして、プライベートでもいろんな人にいじられた。 ネットって怖いですね。 さて、今回は、WEB制作に役立つ定型文のご紹介を致します。 僕自身、デザインする際に構成からガッツリ考えるのが大好きっていうか仕事なので、 それにあわせてダミーテキストを考えることが多いです。 デザインを提出する際には、「テキストテキストテキスト」や「ダミーダミーダミー」で提出することは絶対にしません。 お客様の意図を読み取ってこちらからご提案させていただくということも、Webデザイナーには必要なスキルの一つだと思うからです。 あたりまえなことですが、こういう部分に気づかない方も案外いらっしゃいます。 正直、僕もデザインを始めてすぐの頃にはそんな感じでした。 「仮」という言葉に甘えてしまう事は良く
【CSS】画像を上下中央に表示する（IE7以下にも対応させる） | バシャログ。
娘が小学二年生になり、みまもりケータイ2を買い与えました ishida です。 娘がケータイのボタンを押すたびに、位置情報が送られてきて便利なのですが、 電話をかけたときにも、位置情報がメールで送られてきてちょっと通知頻度高すぎなんじゃね？ さてさて、今回はとある案件で画像を上下中央に表示する機会がありまして、 忘れないように自分的メモです。 CSS3が使えるようになってからは、display: table-cell; で簡単に対応できるようになりましたよね。 例としては、こんな感じ。 HTML/CSSコードサンプル <div class="box"> <p class="image"><img src="image.png" alt="" width="200" heigh="200"><p> </div> .box { display: table; } .box .image { d
デザイナーからデザインの基礎や原則を学べるエントリーまとめ（webデザイナ向け）
webデザインの入門書を買おうか迷っている方。 もしもそんな方がいたら、ネット上にはここを押さえておこうよと、webデザイナーが直接良質な記事を仕上げてくれていますのでそちらを是非一度参考にしてみて欲しいなと思いまとめて見ました。 また、その記事で、もっともぐっときた台詞もチョイスすてみました。 どんな想いで記事を書かれているかというのも大事かなと。 こちらもあわせてどうぞ。 Web制作をこれから始める人の為のスキル・HTML・CSS・ブラウザ・写真素材入手の基礎情報 とりあえず時間のない人はこの3つだけでも食べて デザインを勉強したことがない人でもデザインできるようになるかもしれない4つの基本原則 最初、デザイナーは型破りであるというイメージを抱く人も多いのですが、実際の現場では、様々な原則の上にあるルールにのっとり、そのルールを崩す「理由」があります。 例えばそれがセンスと呼ばれること
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
リアルタイムにPCとスマホのクロスブラウザチェックができるEdge Inspect | SHINGO IRIE
レスポンシブデザインが主流となってきている今では、制作しながらパソコンの画面でチェックして、スマホでチェックして、微調整して…というようにかかる工数も増えてきました。 そんな中、Adobeが出しているEdge Inspectというソフトを知ったのですが、これを使うとパソコンでサイトを開くだけで、連動してスマホでも同じサイトを開いて、見た目の確認をすることができます。 パソコンと連動した画面チェックパソコンとスマホを接続させ、パソコンでサイトを開くと連動してスマホ側も画面が切り替わります。スクリーンショットを撮ったりすることも可能。このソフトはWindowsでもMacでも使え、iOS、Android、Kindle Fireと連動することができます。これを使えば、検証作業のストレスが軽減されることでしょう。 Edge Inspectの使い方まず、Edge InspectはAdobe Creat
2013年、WebデザイナはGitを学ぶべきか？ そして1993年、編集者の7つ道具とは何だったか？ - QA@IT公式ブログ
WebデザイナはGitを学ぶべきでしょうか。答えはイエスだと思います。やらなくてもいいかもしれませんが、やればアドバンテージになるでしょうし、やらないことが今後マイナスになっていくように思えます。 仕事に必要な道具は常に進化します。その変化の過程で「ツールは本質ではない」と、うそぶいたまま時代の波に乗り遅れた人たちを過去に少なからず見て来ました。ツール（道具）が本質でないのは当然です。でも、そのときどきに使うべきツールを使わなければ、良い仕事はできませんし、市場ニーズに応えられません。 そのことを個人的な体験談を混じえて書いてみたいと思います。 今から20年ほど前、学生時代にバイトをしていた出版社で呆れられました。人文系の書籍や雑誌を手がけてきた筋金入りの編集者だった上司は、こう言いました。 「キミは編集者の7つ道具も知らんのかね！」 1993年時点で雑誌や書籍の編集者が必ず持っているとさ
新人デザイナーならブクマして損なしのWebデザインギャラリーサイト
【フレッシュなWebデザイナーの皆さんへ】数ある... / ━━国内ギャラリーサイト━━イケサイ、ABM、S... / 【イケサイ】国内のコーポレートサイトが中心のデザ...他...全14件 【フレッシュなWebデザイナーの皆さんへ】 数あるWebデザインギャラリーサイトの中で、新卒Webデザイナーがとりあえず毎日見ておけば間違いない特にオススメのギャラリーサイトをまとめました。
画像内の指定した色を透過処理できる「jQueryAlphaImage」:phpspot開発日誌
Jquery Alpha Image by Ilker Guller 画像内の指定した色を透過処理できる「jQueryAlphaImage」。 画像編集ツールを使わずとも、jQueryプラグインで簡単に透過処理が行えます この画像が 次のコードで。 透過！ 関連エントリ スプライトアニメーション作成用jQueryプラグイン「Phantascope」 アニメーションしながらソートできるjQueryプラグイン「Animated Table Sorter」 iPhoneのサイドメニュー風UIが作れるjQueryプラグイン「jPanelMenu」 高機能なカラーピッカーを実現出来るjQueryプラグイン「Spectrum」 文字や画像にリアルタイムでモザイク処理がかけられるjQueryプラグイン「SPOILER ALERT!」 チェックボックス、ラジオボタンをクールにデザインできるjQueryプラ
quusookagaku.com - quusookagaku リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
in the looop | Looops communications
マイクロソフト、ブラウザーの互換性検証サイト「modern.IE」日本語版を公開 