SketchでレスポンシブなWebサイトが作れる！「LaunchPad」の実力をチェック
人気のUIデザインツール「Sketch」で作ったデザインを静的なHTML/CSSに展開できる便利なプラグイン。レスポンシブWebデザインにも対応できる「Launchpad」はかなりおすすめです！ Animaは便利なSketchのプラグインを2つ作っています。Auto Layoutは、Sketchでレスポンシブなレイアウトを作るのに使い、Launchpadは出来上がったレスポンシブなデザインを、ほぼ完成版と言えるぐらいのまともな品質のコードに変換し、HTML/CSS Webサイトとして出力します。まずは、ビデオを見てください。 「えっ？ また別のサイトビルダーですか？ 」 そう言わずに聞いてください。Launchpadは単なるHTML/CSSエクスポーター以上のものです。デザインはSketchを使うので、WYSIWYGエディターとも違います。4つ星のコード出力を5つ星のWebサイトにしたいな
ビジネスサイト運営が捗る！WordPress厳選プラグイン10＋1
WordPressは、数多くのプラグインを自由にインストールして、サイトの種類に合わせて育てていけるのが魅力です。特に、企業サイトやショップサイトなど、ブログではない、ビジネスサイトを運営するときには、プラグインの利用が欠かせません。 しかし、たくさんの種類がありすぎて、どれを選んだらよいのか分からないのも事実。そこで、今回は筆者がおすすめする、ビジネスサイトの運営に役立つプラグインをピックアップして紹介します。 なお、ここで紹介したプラグインは次の手順で簡単にインストールできます。 ダッシュボードから「プラグイン→新規追加」メニューをクリックし、「お気に入り」をクリック。 テキストフィールドに「h2ospace」と入力して、「お気に入りを取得」をクリックしてください。すると、筆者がお気に入り登録しているプラグインが一覧されます。ここで紹介しているプラグインはすべて登録していますので、好み
艦隊これくしょんは関連動画3600万再生、イラスト4万枚 (1/3)
この連載では、独自に収集したデータを使って、みんな知ってるようで知らないニコニコ動画の現在を紹介していきます。そして今回からリニューアル！ 第1弾として、いま話題の「艦隊これくしょん」についてpixivのデータも拾って再調査してみました。また今回より新コーナー「ニコ動人気タグトレンド」も始めます！ 連載一覧はこちら。 明治大学米沢嘉博記念図書館スタッフでニコニコ学会β幹事。趣味で同人誌やニコニコ動画関連の研究をしてる人。記事に使ったデータ元の『ニコニコ統計データハンドブック2013』など同人誌をコミケで頒布。ブロマガでは連載記事の補足も。 Twitterアカウントは@myrmecoleon。関わった近著に『進化するアカデミア 「ユーザー参加型研究」が連れてくる未来』（イースト・プレス刊）。右の画像は筆者を擬人化？して描いてもらったキャラ「ありらいおん子」。男の娘。 ■Amazon.co.j
新Webエンジン「Blink」—GoogleはなぜWebKitを捨てたか？ (1/3)
先週、Webブラウザーの世界にふたつほど衝撃的なニュースが走った。ひとつ目はMozillaがSamsungと共同でプログラミング言語Rustをベースにした新Webレンダリングエンジン「Servo」の開発を進めていくと表明したこと、そしてもうひとつが今回の主題、GoogleがWebKitを離れて「Blink」への移行を表明したことだ（開発者向けバイナリーを配布するGoogle Chrome Canary（28.0.1468.0 canary）では、すでにBlinkが含まれている模様）。 Mozillaの抱えるGecko、AppleとGoogleが推進するWebKit、そしてMicrosoftのTridentの3つは、Webブラウザー業界においてシェアのほとんどを握る3大勢力となっている。その勢力のうちのふたつが従来の技術とは別の新しいエンジン採用と開発推進をほぼ同時に発表したことは、今後のト
中学生iPhoneアプリ開発者・Tehu氏の夢 (1/5)
健康計算機 3.0 作者： iTehu Dev team 価格：無料 身長や体重などを情報を入力すると、BMIや理想体重などを算出してくれるiPhoneアプリ「健康計算機」（関連記事、iTunes Storeで見る）。 iTunes App Storeの無料メディカルカテゴリで半年近く1位となっており、世界総合ランキングでもセカイカメラなどを抜いて最高3位にランクインするほどの人気を誇っている。2009年10月に公開してから半年足らずで20万ダウンロードを達成しており、現在もその数は毎日数千ペースで加算されている。 このアプリを開発したのは、兵庫県に住むTehu氏だ。なんと13歳の頃からプログラミングを始め、1年も経たないうちに世界的なヒット作を世に送り出した。普段は普通の中学生として、勉強にも部活にも精を出す日々を送っている。 4歳の頃からネットと親しんできたというTehu氏は、いったい
Adobe CS5は5月下旬発売、Web製品の注目はココだ (1/2)
CS4の発売から約1年半。4月12日、アドビ システムズは「Adobe Creative Suite 5」（CS5）日本語版を発表した（関連記事）。Webデザイナー向けの「Web Premium」、DTPデザイナー向けの「Design Premium」「Design Standard」、映像クリエイター向けの「Production Premium」、全部入りの「Master Collestion」のスイート5製品と、単体14製品からなり、発売は5月28日の予定。価格は、Web Premiumが23万6250円（アドビストアの価格）で、アドビストアでは12日から予約を受け付けている。 Flash関連で新製品が2つ、iPhoneアプリ変換機能は予定どおりリリース アドビは、2008年11月、Flash関連技術／製品からなる「Adobe Flash Platform」を発表。モバイルや家電、エン
ASCII.jp：Googleも採用！CSS3実践テクニック
「CSS3をWebページに実装する」というと意見は真っ二つに分かれる。「完全肯定派」と「完全否定派」だ。しかし、Internet Explorer（IE）を除く主要なWebブラウザー（Safari/Firefox/ Opera/Google Chrome）は現実にCSS3への対応を進めており、少しずつだが、CSS3を利用するWebサイトも現れ始めた。代表例が、おなじみの「Google」だ。 Googleの検索ボタンに注目する 「Google？」と意外に思った方も少なくないかもしれない。次の画面は、Google検索のトップページをSafari 4で開いたところだ。実はこの検索ボタンにCSS3が隠れている。
Web制作に超便利！無料のプロトタイプ作成ツール
本格的なWebデザインに取り掛かる前に作るプロトタイプ。特に受託サイトの制作やチームで制作する場合にはある程度きっちり作っておきたいものだが、「なかなかちょうどいい作成ツールがない」という人も少なくないのではないだろうか。 FireworksやillustratorからVisio、PowerPointまで、プロトタイプの制作に使えるツールはいろいろあるが、今回は無償で使える便利な専用ツールを紹介しよう。それが、オープンソースの「Pencil」だ。Firefox 3のプラグインとして動作するものだが、実際の使い勝手としては独立したアプリケーションのように動く。 使い方は簡単だ。インストールが済むと、Firefoxの[ツール]に[Pencil Sketching]という項目が追加される。Pencilの起動はここをクリックしよう。 プロトタイプを作るための基本操作は、左側に並んでいるGUI部品を
これは便利だ！Excel→Table化するjQueryプラグイン
Webページに掲載する面倒な表（テーブル）の作成を楽にしたい――。以前、本サイトではExcelファイルを簡単にHTML（Tableタグ）に変換するExcelアドイン「XLS2HTMLTable」を紹介した（関連記事）。XLS2HTMLTableはとても便利なツールだが、それでも表が大量に必要な時にはやはり手間がかかる。 今回はさらに楽をできて便利なアイテムを紹介しよう。それが、CSVファイル（カンマ区切りテキスト）を読み込み、Tableに整形して表示するJavaScriptライブラリ「jquery.csv2table.js」だ。 JavaScript関連の著書も多い高橋登史朗氏が作った「jquery.csv2table.js」は、名前のとおりjQueryのプラグインとして動作するもので、HTMLにわずか数行のスクリプトを書き加えるだけで使える手軽なライブラリだ。さっそく実際にjquery.
ASCII.jp：黒船Google汐留沖に出現でWeb広告業界に激震！ PVもUVもユーザー属性も比較できる「Ad Planner」
Web業界に衝撃を与え続けてきたグーグルが、Web広告業界のビジネスの根幹を揺らがしかねないとんでもないツールを公開している。大手サイトのユニークビジター（UV）/ページビュー（PV）から、ユーザーの学歴や世帯収入といった属性まで丸見えにしてしまう「Google Ad Planner」だ。いったいどんなツールなのか。 「公称値」と「Google調べ」が比べられることに 「Google Ad Planner」は、Webニュースやポータルサイトなどへの広告出稿を検討している企業（広告主）の出稿計画をサポートするツールだ。昨年6月、米国でのサービス提供当初は招待制のクローズドなサービスで、日本のWebメディアは未対応だったため、国内のニュースサイトは簡単に紹介した程度だった。しかしその後、対応する国が増え、現在では日本のWebメディアにも対応、ユーザーインターフェイスは英語だが、Googleアカ
JavaScriptライブラリで作るリッチUI（まとめ）
Webサイトを使いやすく、楽しくするリッチなユーザーインターフェイス（UI）。手軽に使えるオープンソースのJavaScript／Ajaxライブラリが充実してきたおかげで、従来はFlashでしかできなかったようなUIが、HTML/CSS＋JavaScriptだけで作れるようになった。 ここに、ASCII.jpで紹介したJavaScriptライブラリの使い方、実際の採用サイトの情報をまとめてみた。ぜひ自分のWebサイトのUI制作の参考にしてみよう。 ※このページは随時更新します Last update：2008年12月18日 JavaScript／Ajaxライブラリ紹介記事
Flash不要！JavaScriptで派手なWebデザイン
ブラウザーいっぱいに広がる鮮やかなグラフィック。フェードインでゆっくりと出現する写真画像。スクロールしながら画像に重なっていく半透明のテキストボックス――思わず見とれてしまう、キャンペーンサイトなどでおなじみの“派手なWebサイト”は、フルFlashが一般的だ。「Flashはよく分からないし、そもそもオーサリングツールもない」という個人サイトの制作者はあきらめるしかなかった。 パリ在住のフリーコンサルタント／Webデザイナー「Sebcreation」のWebサイトは、そんな常識を打ち破ることに挑戦している。まずはトップページを見てみよう。 おなじみのローディングアイコン、上下右左から次々とスライドしてくる半透明のテキストボックス……といったダイナミックなデザインに、「またFlashか」と思わずつぶやいてしまうかもしれない。ところがSebcreationでは、アニメーション／エフェクト処理を
ASCII.jp：Web制作会社が作った！超使えるJavaScriptライブラリ
「Webサイトを作るときに本当によく使う機能を、自分で作らずにさくっと実装したい」――。そんなワガママな願望をかなえてくれる JavaScriptライブラリが登場した。ミツエーリンクスが今月オープンソースとして公開した「MJL（MITSUE-LINKS JavaScript Library）」は、Webサイト制作に必須の“最小限の機能”に絞ったJavaScriptライブラリだ。 昨今相次いで公開されている、リッチなUIを実現するJavaScript/Ajaxライブラリとは異なり、MJLの機能はとてもシンプルだ。もともとWeb制作会社であるミツエーリンクスが「自社標準ライブラリ」として作成したものだけあって、汎用性・実用性を重視したライブラリになっている。 具体的な機能は以下の6つ。確かにどれもよく使いそうなものばかりだ。 画像のロールオーバー Flashオブジェクト埋め込みの機能拡張 新規
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
現場でプロが培ったGoogle Analyticsの使い方
ASCII.jp：Web制作の現場で使えるjQuery UIデザイン入門