最近、音楽の代わりにBGMにかけてるポッドキャスト。 Design Guy。 NHKとかそんなもんばっか聞いてると、心に悪いので。 デザイン系のポッドキャストなんだけど、グリッドデザインとかタイポグラフィーとかの話を英語で延々と喋ってくれる。現在 ep1 〜 ep40 ぐらいまで。 iTunesから定期購読できる。 テキスト版はコチラで見れます。 デザ系で英語リスニングの勉強したい人にはマジオススメ。
CSS Modal ? Paul Hayes CSS3で画像もJSも使わないモーダルボックスサンプル。 ボックスが徐々に大きくなりつつフェードも組み合わせたアニメーションがCSS3で実現されているところがいいです。 ボックスも影がついてて閉じるボタンだってあります。 JavaScriptを切っても動いてます。 実際に使う場合はやっぱりJSを使ったほうが便利なものが出来るわけですが、CSS3だけでも出来るっていうところは知っておいてもよいというのと、内部で使われているテクニックもなんとなくでも覚えておくといいのかもしれませんね。 関連エントリ グラフィカルに加速度を作って要素をCSS3アニメーションさせられる「Ceaser」 IE9にも対応したCSS3リファレンスサイト「css3files」 超シンプルなマークアップで実現できるCSS3による画像を使わない吹き出しサンプル CSS3で実装され
さて、今回は前回の「Fireworksで立体的なアイコンを作る方法」よりも もっと簡単にできるアイコンの作り方です。 今回は5分で作れるアイコンのご紹介!! …の予定でしたが、ブログ記事用に作り直したら7分ちょうどかかりました。 すみません… 操作自体は簡単なので、速い方は5分でできると思います。 ぜひ、5分に挑戦してみてください! アイコンはこちら、建物アイコンです。 ページ下部で制作動画の紹介や、ベクトルデータのダウンロードも可能です。 会社概要の見出しなどに使ってみてくださいね。 速く作るポイントは2つ パスの変形「歪みツール」を使う フィルター効果「シャドウ(内側)」を2つ重ねて使う たったこれだけです。 1.平面の形を作る パースのあるアイコンですが、 まずは真正面から見た図(平面図)をつくります。 2.歪みツールで立体的にする 平面ができたら、1面全部を選択し「歪みツール」で立
すみません、昨日今日とだらだらしてしまって、すっかり資料の公開が遅くなってしまいました><2007年9月8日にノッキングオンさんにて行なわれたデザイン勉強会で、私がお話したことの資料を公開いたします。「デザイナーでない人のためのレイアウト入門」(pdfファイル・約41MB)当日お見せしたものから不要なアニメーション部分を取り除き、1ページ説明を追加してあります。このpdfだけでは当日お話したことがカバーし切れていないのですが、 そこは素晴らしき「ついったったー」の皆さまにより、完璧フォローされておりまする!(皆様に大感謝!!!)デザイン勉強会まとめサイト(by woopsdez嬢)デザイン勉強会のまとめをするよ!(by hamashunさん)「デザイン勉強会」に参加してきました!(その2)(by necozeさん) あ、あと、まとめサイトから、floralさんが録音してくださった音声データ
昨日、Twitterな仲間たちで行われたプログラマのためのデザイン勉強会でスピーカをやってきました。 本来なら、僕はデザイナではないのでスピーカやる人ではないはずなんですけど、ベジェ曲線の描き方をお話ししてきました(この辺の事情は資料を参照のこと)。 ベジェ曲線はドローツールを使いこなす上で重要なのだけど、苦手意識を持っている人が多いみたい。 これが少しでも解消するといいなーと思って、プレゼンしてみました。 当日使った資料とおまけを公開するので、実際に自分で試してもらえるとうれしいなーと思います。 資料一式ダウンロード 解凍すると次のファイルが出来ます。 bezier.pdf プレゼンで使った資料のPDF版です drawing.svg プレゼンの実演で使った、トランプのマークの下絵入りのsvgファイルです。Inkscapeとか、Illustratorで開けます card-mark.svg
Facebookを企業で活用するために、Facebookページの開設・運用方法を解説する本連載。前回は、Facebookページの開設の流れと、iframeを使ったウェルカムページの作成方法について、Web ProfessionalのFacebookページを例に解説しました。今回も引き続き、Facebookページのカスタマイズについて詳しく説明します。 Facebookページをカスタマイズする2つの方法 Facebookページの本格的なカスタマイズに入る前に、Facebookページへのオリジナルコンテンツの追加方法を整理しておきましょう。Facebookページは複数の「タブ」で構成されており、ページ内に新しい「タブ」を設けることでコンテンツを追加できます。タブを追加する方法は、(1)既存のFacebookアプリを利用する、(2)新しくFacebookアプリを作る、の2つがあります。 (1)既
GPSやデジカメ機能を標準装備した携帯電話・スマートフォンが普及し、誰もが気軽に情報発信を行い、位置を反映させたマーケティングや宣伝の恩恵を受けられるようになった。現在は「道具は整った。インフラも整備されつつある。さあ、どんな使い方をする?」と問われている、新時代のコミュニケーション創成期ともいえる。今回紹介するプロモーションも、その「新時代」を感じさせるものである(【ADS of the World】)。 これはドイツで行われたペットフードメーカー【GranataPet】による、同社のペットフードの認知拡大のためのプロモーション。同社のペットフードはザクロを用いた健康的なものとして利用者の評判は高いのだが、知名度そのものが今一つ。そこでスマートフォンや携帯向けの位置SNS【foursquar】(GPS付きの端末利用が前提。色々な場所で「自分はここに来ましたよ」というチェックインを行うと、
2010年4月にスタートした本連載『ウェブで遊ブーン⊂二(^ω^)⊃』も一周年を迎えることとなった。FirefoxやChromeの拡張機能といった定番記事からOperaベータ版紹介といったマニアックな内容もありつつも、こうして続けてこれたのは毎週アクセスしてくれる読者の皆さんあってのこと。心より感謝したい。 さて、今回は連載一周年記念として、本連載で紹介したChromeエクステンションを10個まとめて紹介する。記事のアクセス数順にトップ10を紹介するので、いわば読者が選んだChromeエクステンションだ。本連載ではAutoPagerのような誰でも知っている定番だけでなく、ちょっとクセがあっても使い応えのあるエクステンションを中心にレビューしてきた。それだけに、なかなか特徴のあるランキングとなっている。気になる拡張機能があれば、解説記事を参考にして試してみてほしい。 【1位】ブラウザをまたい
「えっ、そんなはてなとそっくりみたいなことしている会社があるんですか」。Webアプリケーションの開発言語はPerl、Webアプリケーションフレームワークは自社で作り、Webアプリケーションを開発して、CentOSで動作させる――。そんな、はてなの開発とよく似た開発をしている会社が、リクルートメディアコミュニケーションズ(以下RMC)さんです。はてなチーフエンジニアの大西が、自社フレームワーク開発の経緯や、その実際を、RMCの現役エンジニアさんたちに聞きました。ライターの青宮しおりがまとめます。 (※この記事は、リクルートメディアコミュニケーションズ提供によるPR記事です) ――今日はお時間ありがとうございます。はてなでチーフエンジニアをしている大西です。2001年、はてなの創業の年からはてなで働き始めて、はてなの開発を取りまとめてきました。今日は、3人のかたとお話しできるのですね。簡単に自
『SpringPad』は、最近その人気を拡大しているWebノート「SpringPad」のAndroidアプリです。 「SpringPad」は、Evernoteに対抗するWebノートサービスとして、登場してすぐに多くのユーザーを獲得している大人気サービスです。 そのAndroidアプリは、動作も軽く、同期も速い優れものです。テンプレートも豊富でインターフェイスも整っており、その上完全無料でアップロード制限もありません。「Evernoteを超えた」という声にも、うなづけるサービス、アプリです。 今回は本アプリのご紹介に加え、EvernoteとSpringPadの比較も記事の最後に用意しました。そちらもぜひご覧ください。 アプリを起動します。ユーザーIDを持っている方はログインしてください。持っていない方は「Register」から登録できます。 SpringPadでは、Evernoteと同様にす
今回は、皆様の身近にある自社サイトで行えるアンケート調査について、そのメリットと注意点をご紹介します。 自社サイトで簡易アンケートをとることはユーザを理解する上での基礎調査になる。 →メリット1:今、サイトに来ている人がどんな人かがわかる。 →メリット2:調査がしにくいユーザの声が聞ける(遠方や海外にいるなど)。 →注意点1:ユーザ行動ではなく、「声」であるため、あくまで一意見として捉える。 →注意点2:今サイトにきている人の声、かつその一部の人であることを忘れてはいけない。 ●自社サイトアンケートは基礎調査におすすめ 例えば、服を売っている企業であれば、当たり前の話ですがお店に来ている客がユーザです。その人達に対してレジで以下のような質問を2、3個尋ねるだけで、そのユーザの気持ち、想いが把握できます。 今日はどのような目的で来られたのですか? 欲しい物は見つかりましたか? 何か気になった
東京外国語大学多言語災害情報支援サイト TUFS-Multilingual Disaster Information Service provided by the Center for Multilingual Multicultural Education and Research TUFS-Multilingual Disaster Information Service has been terminated [New Announcement] Last Updated: 2011年7月 8日 11:18 このサイトによる情報提供は2011年6月30日で終了いたしました。 本センターでは多言語災害情報の提供支援活動をおこなってきましたが、掲示されている多言語情報がすでに古くなっていると判断しましたので、正式に情報提供を終了することにしました。 本センターがおこなった多言語災害情報
ブログをリデザインしました。 ついでにデザインについても考えてみた。 2011-03-28 今回、色々突き詰めて考えながら、ブログのデザインを新しく設計し直しました。リニューアルしたポイントをまとめてみます。 リニューアル前のデザイン よくある感じのデザインです。ポイントは以下の通り。 2カラム 赤、白、黒が基本色 1カラムにした理由。 ブログサイトでよく見かけるレイアウトは2カラムや3カラムのレイアウトが非常に多いように思えます。 また私自身も2カラム、3カラムのブログ構築しかしてきませんでした。 何が大切か? このブログはまだ日が浅いですが、制作会社時代の社内ブログを含めれば、3, 4年ぐらいブログを書いています。 有難いことに最近は特に、はてなブログのホットエントリーに入ることもあり、何が一番大切かと言われれば、私の場合コンテンツが一番大切だと思います。 コンテンツがなければブログは
グーグル、マイクロソフト、Yahoo!、Facebookらが新しいネットワーキング技術の実現へ「Open Networking Foundation」を結成 サーバの仮想化やクラウドが普及したことで、「サーバを用意すること」の意味が、物理的なサーバを調達することから、サーバのインスタンスを立ち上げることへと変わろうとしています。いまではAPIを叩けば、CPUの性能やメモリ容量を指定し、いくつインスタンスを立ち上げ、いつシャットダウンするのか、すべてAPIから指定できる環境が広まっています。 同じことがネットワークでも起ころうとしています。現在のところ「ネットワークを構築する」こととは、ケーブルを引いてルータやスイッチの設定画面からルーティングやVLANを設定することです。設定されたネットワークは基本的にスタティックなものであり、構成を変えるには再びルータやスイッチの設定画面を開いて設定をや
2011/3/22に、GoogleがようやくGoogle Chrome版「Page Speed」拡張機能を公開しました。 「Page Speed」は、項目をある程度理解できれば自分や自社のサイトの表示速度の改善にとても役立つツールです。 この記事では、「Page Speed」のインストール方法から各調査項目の見方や改善方法を中心に使い方を解説します。 ぜひ、ご自身のサイトの改善に役立てていただければと思います。 そもそも、なぜサイトの表示速度を速くする必要があるのか? 例えば、Amazonの調査によると「表示速度が0.1秒遅くなると、売上が1%減少する」といい、Googleの調査によると「表示速度が0.5秒遅くなると、検索数が20%減少する」と言われます。 また、GoogleはWebページの読み込み速度をアルゴリズムに取り入れたことを発表しています。 大手サイトや大規模なECサイトに限らず
軽快なアニメーションが心地よいナビゲーションを実装するjQueryのチュートリアルを紹介します。 タイトルにある通り、Flashは使わないで実装されてます。 Animated Content Menu with jQuery デモページ [ad#ad-2] まずは、デモページを堪能ください。 ナビゲーションの各ラベルをクリックすると、それに対応したパネルがアニメーションを伴って開くようになっています。 デモページ 実装 HTMLの構造は、背景画像、グリッドのオーバーレイ、ローディングのアイコン、メインメニューの4つから構成されています。 HTML:背景 背景は、背景画像とオーバーレイとローディングをdiv要素で内包します。 <div id="ac_background" class="ac_background"> <img class="ac_bgimage" src="images/D
Movable Type:MTテンプレートの「ファイルへのリンク」のパスを一括設定するプラグイン - TemplateLinedFileManager 2009年7月13日 Movable Type:MTテンプレートの「ファイルへのリンク」のパスを一括設定するプラグイン - TemplateLinedFileManager おはようございます、ディレクターの八木です。 MTテンプレートの「ファイルへのリンク」のパスやテンプレート名をCSVファイルで一括設定するプラグインを作ったのでご紹介します。 Movable Typeのテンプレート編集画面の「テンプレートの設定」欄に「ファイルへのリンク」というフィールドがあります。このフィールドで指定した外部ファイルと、MTテンプレートの内容を同期させるためのもので、Web制作者にとってカスタマイズ効率アップや版管理に非常に役立つ機能です。 【参考】小
指標化の第1歩 前回(http://www.thinkit.co.jp/article/130/1/)では、「Webサイトの標準的な型」を指標化することが、ユーザビリティ指標化の第1歩であることを紹介しました。 今回は「Webサイトの標準的な型」を抑えるとともに、基本的なユーザビリティの紹介しながら、実際に「指標によるチェック」を体験していただきたいと思います。 まずはじめに、「Webサイトの標準的な型」とはどんなものなのでしょうか。 それは、ページ上から下記のような構成要素で成り立ちます(図1)。 ・ヘッダー ・グローバルナビゲーション ・メインビジュアル ・コンテンツエリア ・ローカルナビゲーション ・フッター それぞれの構成要素の用途も決まっており、ヘッダーは全ページ共通で使われ、Webサイト自体が属している企業やプロダクトを理解させるために使用します。また、「サイトマップ」や「お問
旧ブログで公開していた「Dreamweaver スペシャルコードヒント」ですが、ありがたいことにリクエストをいただきましたので、改めて公開します。 なお、データ自体は公開当時のままですので、最新版で動作しない場合はご容赦ください。 そもそも、スペシャルコードヒントとはDreamweaver でコーディングする際、先頭の数文字を入力しただけで入力候補を一覧化してくれる「コードヒント機能」。スペシャルコードヒントは、このコードヒント用の XML ファイルをカスタマイズしたものです。 デフォルトのコードヒントからの変更点は、以下の通りです。(※対応バージョンごとに多少の差異があります。) 利用頻度の低い CSS プロパティのコメントアウト@ で @import を表示数値入力の際、px、%、em、s、deg、grad、rad、turn を表示CS4 版のみ「!im」で !important を表
Writen by Bogdan+ / Comments Off on 30 Superb Photoshop Web Layout Tutorials Designing layouts in Photoshop is easier than you think and if the website only needs some text and images, you can actually do all the website in Adobe Photoshop. If you need some inspiration or you want to learn something about web layouts, you should check out these superb tutorials. Some of them are new, some of them
Appetizers A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. Lobster Bisque Smoked Salmon Terrine Tuna Ceviche Wild Mushroom Flan Almond Bruschetta Green Chilli Canapee Artichoke Rucula Salad Main Course Drops of rain could be heard hitting the pane, which made him feel quite sad. Wild Sea Bass Filet Linguini and Cla
404 - ユメイサオスホトシサソツシ。」 ト昮ェイ鰈メオトラハヤエソノトワメムアサノセウ」ャメムク�クトテ﨤ニサ゚ヤンハアイサソノモテ。」
Welcome to FastComet! You see this page because no website has been published for this domain yet. If you need any help to get started or transfer your existing website, feel free to contact us 24/7 via your client area. The placeholder page will be automatically replaced as soon as you publish your website.
無効なURLです。 プログラム設定の反映待ちである可能性があります。 しばらく時間をおいて再度アクセスをお試しください。
「SEOサービス」海外SEO エルテスのSEOサービスによって、英語圏、中国圏への海外SEO、中国SEO(中国語SEO)によるプロモーションが可能になります。(ベトナム、タイは現在準備中) もともと、エルテスの最適化は全世界からの施策を行っておりますので、その言語特性をつかめば、全世界で対応することが可能になります。 エルテスでは、海外SEO、中国SEO(中国語SEO)サービスによって、いまだかつてない、安価な他国エンドユーザの獲得を実現いたします。 ・海外からどうやってアクセス数を増やしたらいいかわからない ・日本語サイトの対策と海外向けサイトの対策の違いがわからない。中国大陸向けのサイト(中国語簡体字)や、台湾香港向けのサイト(中国語繁体字)向けの対策が分からない。 ・海外での企業、製品のブランディング確立をさせたいが、どうすればよいのかよくわからない。 上記のお悩みをお持
グローバルSEOは、英語(英文)、中国語(簡体字・繁体字)などの多言語ウェブサイトに対応した海外向けSEO(検索エンジン最適化)対策サービスです。貴社の海外進出・ネットビジネスを強力に支援します。 英語圏SEOサービスの詳細 中国語圏SEOサービスの詳細 ※英語圏・中国語圏の現地駐在員様もお問い合わせください。 サービス内容 SEOカルテによる分析 SEO対策を始める前に、現状のサイト診断をSEOカルテを用いて行います。この結果により、どの部分に注力して対策していくことが効果的かを分析致します。 対策ページと対策キーワードのご提案 SEOを行うに当たり、対策するに最もふさわしいキーワーはどれなのか、選定したキーワードに最も適合するページはどこなのかを適切にご提案致します。 チューニング提案(1~2回) SEOカルテにより判明した結果、対策ページと対策キーワード、御社のアセスメント時の諸注
Social Bookmarkとは? ソーシャルブックマークとは、インターネット上に「お気に入り」サイトを登録できる 『オンラインブックマーク』というサービスをメインに提供しているサイトのことです。 また、ネット上の多くのユーザー同士で情報を共有し合うことにより、 皆から注目されている人気のサイトがわかる 同じ興味を持った人がチェックしているサイトがわかる など、インターネットが持つメリットでもある「Social」な面を発揮し、 不特定多数による人気投票、知識の拡がりを最大限に活用しています。 この不特定多数による共有が、 単なるお気に入りのメリットを超えた、ソーシャルの価値となっています。 【メリット】 現在使っているパソコンの「お気に入り」と同じ機能がクラウドで再現できる ネット上で再現したブックマークは、世界中のパソコンからチェック可能 パソコンが壊れたとしても、まったく影響を受けな
ITパスポート試験は、情報処理技術者試験センターが実施する情報処理技術者試験の一つで、「職業人が共通に備えておくべき情報技術に関する基礎的な知識」が備わっている人材を認定するための試験です。合格すると、ITに関する幅広い基礎知識を持っていることが証明されます。 受験機会は、毎年4月(春期)と10月(秋期)の年2回です。試験時間は2時間45分で、選択式の問題を100問解きます。 ITパスポートをはじめとする情報処理技術者試験の特徴として、過去問題からの出題が多いことが挙げられます。そのため合格への近道は、過去問題を解きながら知識を吸収するのが一番です。そこで本連載では、2009年10月(平成21年度秋期)に実施されたITパスポート試験の全問題の解答・解説を掲載します。 なお、各問題には、情報処理技術者試験センターが公開しているシラバスに基づいた問題の分類(分野>大分類>中分類>小分類)が示し
UFABET เว็บพนันออนไลน์ อันดับ 1 บริการแบบครบวงจรตลอด 24 ชั่วโมง UFABET เป็น เว็บไซต์พนันออนไลน์ อันดับ 1 ของประเทศไทยและเอเชียที่ได้รับการยกย่องเรื่องการบริการและความมั่นคงทางการเงินอย่างสูง UFABET ฝากถอน ไม่มีขั้นต่ำ เนื่องจากเราใส่ใจคุณภาพในด้านการบริการและประสิทธิภาพของเว็บไซต์อย่างมาก ทำให้มีสมาชิกจำนวนมากให้ความเชื่อถือกับเราและเพิ่มขึ้นอย่างต่อเนื่อง เราเป็น เว็บพนันออนไลน์ ที่บริการรับเดิมพ
ワクワクが止まらない…雑誌の見開きページに仕込まれた面白アイデアいろいろ 左上に見えているのは女性の太もも。このままページを開くと、どんな内容が出てくるか想像が付くでしょうか? あの手この手で見開きを活用した、さまざまなアイデア広告をご覧ください。 左のページはつるつるの足。右のページは……どうやら脱毛の広告みたいです。 とにかく薄いってことが伝わってくるノートPC。 ページを閉じたり開いたりすればトレーニング風景になります。 ページをめくることで腹筋運動。 むやみに閉じたり開いたりしないように。 背中折れますってば。 左の人に荷物を受け取り…。 右の人に荷物を渡す。透明の素材を上手に利用しています。 こちらはグリンピースの広告。 バッサリ。 しおりのヒモが歯間ブラシになっているわけですね。 おなじみ、飛び出す絵本。 右腕のあたりを気にしているお母さん。なんででしょうか? こちらも右わき腹
標識や地図など、普段の生活の中で非常に役立っているインフォグラフィック。そのインフォグラフィックを中心としたデザインの歴史が一枚にまとまった画像です。1万8500年前から現代に至るまでのデザインが移り変わっていく様子が上手にまとまっています。 インフォグラフィックの歴史は以下から。A History Of Graphic Design [INFOGRAPHIC] これが「インフォグラフィックを中心としたデザインの歴史が一枚でわかる画像」です。 1万8500年前の人類は洞窟壁画を描いていました。 インドのビンベットカで紀元前5000年という先史時代の岩絵が見つかっています。この「ビンベットカのロック・シェルター群」は2003年にユネスコの世界遺産に登録されました。 紀元前1200年にはフェニキア文字が生まれています。最近ではアニメ「STAR DRIVER 輝きのタクト」で使われたことでも有名
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く