フロントエンドの実装から見る第四十七回衆議院選挙 開票速報ページまとめ - 暮らしの技術
700億円ほどのお金がかかっているといわれ，why-kaisan.comなんてサイトも作られ巷を賑わせた第四十七回衆議院選挙の投票日が今日でした．投票日と言うことはその後に来るのは開票で，開票と言うことは開票速報がはじまるわけです． 報道各社を見てみますと，各々工夫を凝らした開票速報ページを用意しておりまして，これがなかなかおもしろいということで，その比較でございます． まとめ 長いので先にまとめです． まずテレビと新聞で圧倒的に態度が違います．テレビはあくまで番組の補助だったり宣伝が目的．ウェブページではあまり情報を出したくない様子です．一方新聞各社は トップページ上段，ファーストビューのど真ん中を思いっきり使い，文字通り全面展開といったパターンが多い． フロントエンドの実装から見ると，基本的にグラフが必要な場面ではCSS，日本地図が必要な場面では「画像+mapで部分リンク」か「要素の絶
2014年Webデザイナーはコードをどこまで学ぶべきか、Webデザインが今までどのように進化してきたかのまとめ
Webデザイナーはコードを学ぶべき？ コーダーはデザインを学ぶべき？ 両方に精通している人はなかなか多くはいません。Webデザインがどのように進化してきたのかその流れをしっかり押さえ、デザインとコードのギャップをつなぐことができたか振り返ってみましょう。 A brief history of web design for designers 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 先日の彼らの記事「しっかりと理解しておきたい！レスポンシブWebデザインを使いこなすための9つの基本原則」と同様に、分かりやすいアニメーションもお楽しみください。 1989年：Webデザインの暗黒時代 1995年：Webデザインの始まりはテーブルから 1995年：JavaScriptが表現の幅を広げる 1996年：Flashにより自由の黄金期へ 19
コンテンツマーケティング・オウンドメディアならLAMP Marketing｜株式会社ランプ
株式会社ランプは 貴社のWEBサイトの成長に寄り添った コンテンツマーケティングを提供します。 豊富なスキルを持った専門スタッフによる質の高いデジタルコンテンツと、 独自に開発したアクセス解析ツールを用いて貴社のWEBサイトの状況を可視化し、改善案をご提案いたします。
FINDJOB!終了のお知らせ | FINDJOB!
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
複雑なPC向けコンテンツに対して、アコーディオンが常に答えになるとは限らない
ページは、長いほうがユーザーのためになることもある。アコーディオンはページを短くし、スクロールの回数を減らすが、インタラクションコストを上げてしまう。トピックの見出しに対する判断をユーザーに要求するからである。 Accordions Are Not Always the Answer for Complex Content on Desktops by Hoa Loranger on May 18, 2014 日本語版2014年7月9日公開 アコーディオンメニューとは見出しを垂直方向に並べたリストで、見出しをクリックすることでそれに関連したコンテンツを出したり、見えなくしたりできるもののことである。これはコンテンツをユーザーに徐々に見せる方法の1つで、広げたり、あとで見るために隠したままにすることでコンテンツをコントロールできるので、読むものと無視するものをユーザー自身で決められる。ユーザ
動きがあるWebデザインの参考になるアニメーションのサイトまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。 上野という土地をいまだに苦手とする野田です。 断固として代官山がいいと入社してからずっとわがままを言っています。 絶対に実現されないですが。 さて、今回は僕がWebデザインの際に参考にしているアニメーションのサイトをご紹介します。 数はそんな多くないですが、時間の空いた時間にでもご覧いただければ幸いです。 Hover States http://hoverstat.es/ このサイトははとても素晴らしいです。各サイトのアニメーションを一覧で確認することができます。 インスピレーションを得たいときに大変助かっています。サイトのアイデア自体、素晴らしいですね。 Unheap http://www.unheap.com/ jQueryのpluginを紹介しているサイトですが、使用目的ももちろん、動きの参考にもなります。 自分でイージングを変えたりして、どういうものがサイトに合うのか
差がつくメニューアイコン 25個のCSSアニメーション (1/2)
随所に使用されているアニメーション 美しい建築写真が、存在感のあるタイポグラフィとともに目に飛び込んでくるサイト「Studio Songes（ステュディオ・ソンジュ：スタジオ夢）」。ダイナミックなページ全体の動きに加えて、ページの右上にある小さなメニューアイコンにもユニークな動きが取り入れられている。 メニューアイコンをマウスホバーすると、≡の3本のラインが整列し、クリックすると1本のラインに変化するギミック。CSSアニメーションを活用したサイトでは、こんな小さなメニューアイコンの動きにまでこだわるサイトが増えている。 今回は「Studio Songes」を参考に、CSSアニメーションを使ったメニューの開閉アイコンを作成する。アニメーション自体は小さな動きだが、メニューの開閉という大きな動作への導線でもある。覚えておくときっと役に立つはずだ。 STEP 1：アイコンの初期状態を作る メニュ
かわいい系デザインに使えるフォントや素材、デザインアイデアを集めました
2019年6月4日 Webデザイン, ダウンロード, フォント 女性Webデザイナーにとっては「かわいいと言えばこんな感じ！」という基本的な概念が自然と身についているものの、男性デザイナーにとってはなかなか難しい女性テイストのデザイン。でも大丈夫！今回紹介する無料素材やフォント・配色例を組み合わせれば、きっと女子力の高いかわいいデザインができあがるはずです！紹介する素材はすべて商用利用OK！参考になるデザインのWebサイトもいくつか紹介します！（あ、ちなみによく誤解されますが、私、Webクリエイターボックスの中の人は女ですw） ↑私が10年以上利用している会計ソフト！ 目次 無料フォント 無料アイコン・イラスト素材 無料の背景パターン素材 「かわいい」を実現する配色例 かわいい系デザインのWebサイト実例 無料フォント 曲線をうまく使うと女性らしいデザインに仕上がります。そこで、使用するフ
グラフィックデザイナーに知ってほしいWebのこと
グラフィックデザイナーが作ったWebデザインをコーディングする、という案件を受けることがあります。 「デザインすること」については歴史が長いグラフィックデザイナーに一日の長があると思っていますが、Webにはグラフィックと違った特徴があります。 Webデザインを制作する際に知っておいてほしいことを挙げてみます。 タイポグラフィの制限 同じ文字でも、Webサイトには「画像」と「テキスト」が存在します。 簡単に区別すると、マウスカーソルで1文字ずつ選択できるものがテキスト、出来ないものが画像です。 画像はIllustrator・Photoshop等で制作したままの見た目を表示させることができますが、画像内に含まれる文章をGoogleなどに認識させにくいです。 テキストは情報をGoogleなどに認識させやすいのですが、フォント指定・装飾（袋文字や影など）・字詰めなどのタイポグラフィが苦手です。 画
IllustratorでのWebデザインがいい感じ！おすすめポイントや設定いろいろ
2014年3月19日 Illustrator, Webサイト制作 これまでは「WebデザインといえばPhotoshop」というのが通例でした。しかしIllustratorもWeb制作の環境に適応されてきた今、フラットデザインやイラストを多く扱うWebサイトでは断然Illustratorをおすすめします！今回はあまり知られていないIllustratorとWebデザインの相性や、Webデザイン用の設定方法等をご紹介します。 ↑私が10年以上利用している会計ソフト！ Illustrator初心者さんへ Illustratorはベクター形式の画像を作成できるAdobe社のアプリです。ロゴやイラストを作る時にはかかせません。Adobeの公式チュートリアルサイト、Adobe TVではIllustratorの概要やチュートリアルをはじめ、新しい機能の紹介も随時追加されています。 Illustratorは
文字の上にカーソルを置くだけでフォント名が分かるChromeの拡張機能「WhatFont」
ウェブサイトはレイアウトや文字の選択で雰囲気がガラっと変わるため、人目を引くウェブサイトが使っているフォント名・文字サイズ・文字の色などは気になるところです。文字の上にカーソルを置いたりクリックしたりするだけでフォントの種類や詳細が分かるGoogle Chrome拡張機能が「WhatFont」で、気になるウェブサイトのデザインの秘密が簡単に分かるようになっています。 WhatFont Tool - The easiest way to inspect fonts in webpages « Chengyin Liu http://chengyinliu.com/whatfont.html Chrome ウェブストア - WhatFont https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpml
Web向けにIllustratorを使う上でのコロンブスの卵的なアプローチ｜DTP Transit
2010年にリリースされたIllustrator CS5でのWeb向けの機能強化以降、Web向けにIllustratorを使う上では、次のアプローチが基本とされてきました。 ドキュメントプロファイルに「Web」を選択し、［新規オブジェクトをピクセルグリッドに整合］にチェックを付ける ［ピクセルプレビュー］をオンにする 先週末に行われたdot-ai, Vol.2において、黒葛原 道さん（eater）が、次のアプローチを発表され、「なるほど！」と思ったのでご紹介します。 ［新規オブジェクトをピクセルグリッドに整合］はオフにする グリッドを1ピクセルに設定し、［グリッドにスナップ］をオンにする ［線の位置］は外側に設定する 次の図は、左が従来のもの。右側が黒葛原さん方式です。 Illustratorの「ピクセルグリッドに整合」は、3px x 3px、線幅1pxの図形を描画する際、ピクセルグリッド
背景固定で美しいブラーがかかった半透明のパネルだけがスクロールするスタイルシート | コリス
レスポンシブ対応で背景画像は固定表示、美しいブラーがかかった半透明のパネルだけがスクロールするコンテンツを実装するスタイルシートを紹介します。 最低限の要素にしたデモ 実装は、こんな感じになります。 HTML パネルはarticle要素で実装します。中身はテキストでも画像でもフォームでも何でもOK。 <body> <article> <h1>半透明の美しいパネル</h1> <p>洋酒といえば、誰でも最初に思い浮かべるのがウイスキー。いわば洋酒のシンボル的な存在なのだが、英語表記が［一般に〔米〕では Whiskey,〔英〕では Whisky.］であることはあまり知られていない。米英両国では、このスペルの差で自国産と輸入品を区別しているという。わが和製ウイスキーの“Whisky”という英国式表示は、手本にしたスコッチのフォルムに倣ったものであり、それ以上の意味はないようだ。カナ表記にしても、ご
cssとは？使い方と学び方の基礎まとめ - プログラミング学習の窓口
プログラミングの基礎であるhtmlを勉強していると、必ず出てくる言葉がcss。 現代のwebサービスにおいて、htmlとcssはいわば兄弟のようなもので切っても切れない関係と言えるでしょう。 では、cssとはいったいどういうものなのでしょうか。 簡単に言うと、Webページの文字の色や大きさ、背景、配置といった見た目を設定する言語の一種です。 静的ページも動的ページも見た目の部分の多くはこのcssで制御されています。 もしcssを詳しく学ぶなら、独学もいいですがプログラミングスクールがおすすめです。費用は当然かかりますが、アドバイスがもらえることと、学習スケジュールが管理されるので、強制的に頑張れる仕組みが作れるのもメリットと言えるでしょう。 The post cssとは？使い方と学び方の基礎まとめ first appeared on プログラミング学習の窓口.
これからはスマホ対策ではなく、スマホ・ファーストになるという話｜More Access! More Fun
最近、「Webでの集客が最近とても厳しくなった」というお問い合わせとか、メルマガのご質問を結構いただくのだが、共通して言えることがございまして、それは「スマホ対応してない」というのが明らかな原因のケースがよくある。 PCでの表示だけでスマホに適正化されてない場合、そしてトップがやたらごちゃごちゃしている場合、トップページだけ見てそのままページ遷移をせず(ほかのページを見ないで)に帰ってしまう人が多いんだろう。特に飲食店やサービスなど野外から見ることが多かったり、顧客の層がPCよりスマホが圧倒的多数だったり(年齢的に若かったり)するのに、これに対策してないサイトは致命的なアクセス低下や、問い合わせ数の激減を招いている場合が多くある。 このブログはとりあえずスマホ対応しているテーマだが、上位階層は対応してません。というか顧客のサイト制作で手一杯で自分のなんてやってる暇が無いんです(言い訳)。い
実例で納得！シニアが使えないサイトの例 | マミオン有限会社-パソコン・数学研修、法人研修
パソコン教室でシニア層にインターネットの使い方を教えているときほど 「ああ、ここがもう少し改善されれば！」と吠えたくなる時がある。 「知りたい事」「申し込みたいもの」「買いたいもの」があって ワクワクしているのに、多くの人が、若い人に取っては「些細な」ミスで サイト上で目的を達成できずに諦めたり、 諦めきれないからとサポートセンターに電話して 「その情報はホームページに載ってます」と言われ落ち込んだりしている。 今日は大学の公開講座に申し込もうとしている70歳代後半女性の話。 ウキウキの申し込み「大学の公開講座申し込みたいの。英語をやり直したいのよ」といらしたMさん。 「新聞の折り込みで講座を見たのだけど、ホームページから申し込んでって書いてあって。 ホームページを見たのだけどどうすればいいのかわからないけど ホームページからしか申し込めないらしいから、やり方教えて」 とのこと。 チラシに
Google Web Designer - Home
Create engaging videos, images, and HTML5-based designs for your business that can run on any device Intended for business use only Features that help businesses bring ideas to life Google Web Designer gives you the power to create beautiful and compelling videos, images, and HTML5 ads. Use animation and interactive elements to build out your creative vision, then scale your content for different
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSグラデーションで作った背景パターンのサンプル - NxWorld
【360°空撮】新発見！絶景北海道～見たことのない景色～
UIデザイン、必須ツールメモ
