若者を中心に爆発的な人気となり、ユーザーを増やし続けているInstagram。Web関連の仕事をしていると、最近ではクライアントからも「Instagramを使いたい」という要望も聞くようになりました。Instagramが今どうなっているのか?どう活用し、どのように見てもらうのか、初歩的な内容から少し専門的な内容まで、参考になるサイトや記事をまとめました。
若者を中心に爆発的な人気となり、ユーザーを増やし続けているInstagram。Web関連の仕事をしていると、最近ではクライアントからも「Instagramを使いたい」という要望も聞くようになりました。Instagramが今どうなっているのか?どう活用し、どのように見てもらうのか、初歩的な内容から少し専門的な内容まで、参考になるサイトや記事をまとめました。
video要素について 今回はHTML5新要素の中でも注目度が高い「video要素」の基本的な記述方法をご紹介します。 video要素はFlashなどのプラグインを使用することなく動画をウェブ・ページに表示することができます。ですが、IEが8まで対応していないことなどから動画コンテンツはまだまだFlashを使ったものが多いように感じます。今後ブラウザの対応が進めば、video要素を使った面白い動画コンテンツがドンドン出てくると思いますので、その時にコンテンツ制作に関わったりアイデアを出せるように今から少しずつ学んでいこうと思います。 video要素の再生とブラウザ表示 video要素をただ再生するにはsrc属性に再生する動画ファイルを指定するだけです。試しにsrc属性にMP4形式のファイルを指定しブラウザでの表示確認をしてみます。また、controls属性を指定することで再生・停止ボタンな
これからのWEB制作はPCサイトだけではなく、iphoneなどのスマートフォンやipadなどさまざまなデバイスでの閲覧を前提として作成しなければいけません。 iphoneサイトやAndroidサイトはHTML5やCSS3にかなり対応しているので簡単そうなイメージもありますが、縦画面、横画面など変化することを前提に構築しなければいけませんし、Androidは機種によって解像度が違う、機種によってCSSが適用されないという昔のモバイルサイトより大変なことがおきているようです。 またシミュレーターを使ったり、実機をたくさん揃えたり、レンタルしたりとPCサイトより手間な制作の時代に逆戻りですね・・。 友人に聞いたら現在は案件よってはiphoneのみ対応、iphoneとdocomoを対応、すべて対応などさまざまなようですね。まあこれは予算によるのかもしれませんね。 僕はまだ本格的なスマホサイトの仕事
WEBマガジンなどコンテンツの多いサイト構築の参考に!女性ファッション紙のWEBサイト集めました【51サイト】 前回の記事でセレクトショップ系のサイトを集めていて雑誌関係のサイトはどうかなとおもって女性誌を中心に集めてみました。 雑誌もショップ同様毎月発行などで頻繁にコンテンツが更新されるのでほとんどが内部運用になるのだとおもいますし、雑誌の目次的な使い方なのでどのサイトも基本のレイアウト構造は同じでした。 個人的には毎月更新するサイトとしては「VOGUE」のデザインが一番かっこいい感じがしました。あとは不定期ということで特設サイトみたいになっている「SWAKE」などもよかったです。あと宝島社って女性誌たくさんだしててTOPページは各雑誌毎にテイストが違っていてよかったです。 あと雑誌で使われている表紙の画像を大きく使っているサイトは見栄えも良く、情報系サイトなどコンテンツの多いサイトを作
これからのWEB制作はPCサイトだけではなく、iphoneなどのスマートフォンやipadなどさまざまなデバイスでの閲覧を前提として作成しなければいけません。 iphoneサイトやAndroidサイトはHTML5やCSS3にかなり対応しているので簡単そうなイメージもありますが、縦画面、横画面など変化することを前提に構築しなければいけませんし、Androidは機種によって解像度が違うということでそれも意識しなければならなくなるのかな? PCサイトとスマホサイトの作り方(使い分け)としては下記のような作り方になるのかなと思っています。 PCサイトとスマホサイトを別で作成してユーザーエージェントで振り分け WordPressなどCMSのプラグインで自動的にスマホ専用レイアウトとして表示 メディアクエリーの使い一つのHTMLで画面サイズによってCSSを振り分け スマホでもPCサイトをそのままても違和
FlashからEdge?Adobe Edgeを使ってみる! 『インストール方法からサンプルコンテンツ作成まで』 Adobe Edgeとは 先月の1日(※現在は2011年9月)アドビがHTML5対応のインタラクションデザインツール「Adobe Edge」のパブリックプレビュー版をリリースしましたが、皆さんはもう使ってみましたか? リリース後、私の周りでもとても話題になっていました。 この「Adobe Edge」はFlashで行っていたアニメーションなどのインタラクティブコンテンツを『 HTML5・CSS3・JavaScript 』などの標準規格を使用して制作することができるツールになっているようです。 思えば、去年ぐらいから私自身もFlashを使う機会が減ってきたように思います。今後どうなっていくのだろう?と考えていたところでのリリースでしたのでとても興味があります。 また「Adobe Ed
ほとんどCSSは変えずにxhtmlとHTML5で同じレイアウトの作成と作りながら悩んだことまとめました【サンプルソース付】 xhtmlとHTML5で簡単なページレイアウトを作成し、コーディングのタグ違い、新要素(タグ)の説明、アウトラインの説明してきましたが、今回が最終でCSSでレイアウトまでを作成させました。 【前回のまでエントリー】 HTML5は難しくない!? XHTML1.0とHTML5のコーディングの違いを確認してみよう!【初級編:HTML5のマークアップ】 HTML5は難しくない? HTML5から追加された新要素を理解しよう!【初級編 :HTML5のマークアップ】 HTML5のアウトラインって何?xhtmlとHTML5のコードを比較してアウトラインを理解しよう!【初級編 :HTML5のマークアップ】 HTML5では要素やCSSの設定の仕方でいろいろな考えがありますので今回のソース
前回のエントリーではサンプルソースを基にHTML5の新要素について確認しました。前回のエントリーをご覧になっていない方はこちらからご覧になれます。 【前回のエントリー】 HTML5は難しくない? HTML5から追加された新要素を理解しよう!【初級編 第2回:HTML5のマークアップ】 HTML5は難しくない!? XHTML1.0とHTML5のコーディングの違いを確認してみよう!【初級編:HTML5のマークアップ】 今回はそのサンプルソースからアウトラインを確認していきます。アウトラインはHTML5でコーディングする場合にとても重要な部分になりますが、構造的な話になるのでわかりにくく感じしてしまうと思いますので、アウトラインを視覚化する『HTML 5 Outliner』を利用してxhtmlとHTML5の違いを比較しながら理解を深めていきたいと思います。 アウトラインとは まずはアウトラインに
HTML5は難しくない? XHTML1.0とHTML5のコーディングの違いを確認してみよう!【初級編:HTML5のマークアップ】 先日のエントリーでもHTML5で作成されたサイトが増えてきていることから、そろそろHTML5の勉強をそろそろしなければと思っている人も多いと思います。 グーグルの特設サイトなどがトリッキーなことをやっているのでHTML5=難しいと思っている人もいると思いますが、あのような動的なサイトやAPI関連をいきなりやるのはなかなか大変ですし難しいです。それよりほとんどの人ですぐ必要になるのが通常のページをどうマークアップするかだとおもいます。 構造の考え方が全く変わりましたが、マークアップだけでしたらXHTMLとHTML5はいままでxhtmlでマークアップしていた人にとっては簡単に乗り換えられるとおもいます。 xhtmlではブロックレベル要素とインライン要素という分類に分
HTML5でのコーディング 最近、HTML5のコーディング案件に関わることがあったのですが、その時にHTML5でコーディングされている企業サイトを調べましたので今回ご紹介したいと思います。 尚、サイトを調べていて気づいたのですが、現状(2011年8月)では宣言をHTML5にして内容自体は今まで通りdiv要素を使ってマークアップしているサイトが多いように感じました。新要素を多用して後から間違えが出てくるという可能性を考慮すると、とても理にかなっていると1人で感心してしまいました。今後この流れは変わると思いますが現状(2011年8月)では大切な考え方の1つだと思っています。 それともう1つ、多くのWEB制作会社が自社サイトをHTML5で作り直しているようです。調べて見つけるとWEBの制作会社サイトであることが非常に多いように感じました。とても参考にさせていただきました。私も取り残されないように
皆さんいつもWEBサイトのデザインをする際に何を参考にしていますか? 気にいったサイトがあったらブックマークをしてストックしておく、WEB系の本を見る、あとはWEBサイトのまとめサイトを見るですよね? 自分もまとめサイトを見つけるとブックマークして定期的にチェックしていたのですが、いろいろなまとめサイトがありましたのでまとめサイトをまとめてみました。 このほかにもこんななのがあるよというのがありましたら是非教えてください。 TheFWA http://www.thefwa.com/ High Floater http://www.highfloater.com/ ABM | AnotherBookmark™ – Webデザインブックマークサイト http://www.anotherbookmark.com/ Webデザインのリンク集 Webデザインポータルサイト S5-Style http
最近スマートフォンのシェアが広がってきてWEBサイト作成もPCサイトのみでなくiphoneなどのスマートフォンを意識する提案も増えてきましたか? しかしHTML5+CSS3サイトで専用ページを作ったり、CMSのプラグインで振り分けたりと作り方は色々です。 参考となるiphoneサイトやスマートフォンサイトもまだまだ少ないので提案の際の資料探すのも大変ですよね・・。 これからもっと増えるとおもいますが現段階でのスマートフォンやiphoneサイト、iphoneアプリ専用サイトなどをまとめてみました。 日本ではサイトの数が少なかったので、昔からの知人の『バンクーバーのうぇぶ屋』のSenna君にも海外の方のアプリ系やiphone系のサイトを教えてもらいました。 他にもサイトがありましたら是非教えてください。 国内サイトのiPhoneサイトやスマートフォンサイト スマートフォンサイト集めま http
HTML5の『canvas』要素 今回の標題でもあるcanvas要素は、HTML5の新要素の中で最も注目されている要素の1つなので、私もこれから学習していくのがとても楽しみです。 まずcanvas要素について知るために参考サイトを見つけることから始めました。調べるとすぐにサンプルなどが数多くヒットし、その中には目を奪われる表現や複雑な処理を行っているモノがいくつもありました。また、サンプルは非常に多いのですがちゃんとしたサイトでの事例はまだまだ少ないのが現状だということも知ることができました。まずは焦らず基礎から勉強していこうと思います。 『canvas』要素のサンプルまとめ 今回調べた『canvas』要素を使ったコンテンツをいくつかピックアップしましたのでご紹介します。 HTML5 Canvas and Audio Experiment 音楽に合わせて複数のオブジェクトが円になったり、マ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く