アップル「Swift UI」が注目される理由 (1/5)
Mac ProとProDisplay XDRが登場したアップルのWWDC19。おそらく多くの一般の人が手に入れる可能性は極めて低いのですが、やはりアップルから新しいハードウェアが登場すると、会場内もストリーミングを見ている人たちも、盛り上がるものです。 Macラインアップについて1つ触れたいのは、T2チップの存在。Mac ProにもT2チップが搭載されたことで、T2チップがないMacとして取り残されているのは、実はiMacのみとなりました。 T2もしくはその後継となる独自チップを搭載するiMacの登場が待たれますが、A10レベルの処理能力を備えるT2の次世代版が登場するならA11やA12と同等の性能を備えて機械学習処理の特化したニューラルエンジンがついてくるはず。 となると、そのニューラルエンジンの処理能力を活用するFace IDも利用できるようになるわけで、iMacにTrueDepthカ
高度で複雑なWebアニメーションが自在に作れる！GreenSockプラグイン5つ
FlashライクなWebアニメーションを実現するJavaScriptライブラリー「GreenSock」。イラストからテキストまで、思い通りのアニメーションを作成できる便利なプラグインを紹介します。 GreenSockのプラグインをいくつか紹介します。 紹介するプラグイン ベジェ曲線パスに沿ってプロパティをアニメーションする「BezierPlugin」 画面上で要素をドラッグできるGSAPの「Draggable」ユーティリティと、要素を滑らかに動かしてスムーズに停止させる「ThrowPropsPlugin」 SVGストロークを動的に描画する「DrawSVGPlugin」 パスのポイント数が異なっていても任意のSVGパスを別のパスにモーフィングできる「MorphSVGPlugin」 おもしろいテキストアニメーションエフェクトを実現する「SplitText」ユーティリティ このチュートリアルを最
知らなきゃ損！CSSのmaskとSVGを駆使して画像を自在に切り抜く方法
CSSで画像をマスクしたり切り抜いたりする方法にはborder-radius、clip、clip-pathなどがありますが、maskプロパティとSVGのmask要素を使った方法なら、もっと自由な形にマスクができます。 ※本記事は2016年6月17日に掲載した記事を再編集したものです。執筆時点の情報をベースにしており、最新ではない可能性があります。 マスクは、画像または要素の不要な部分を隠し、見せたい部分のみを表示するテクニックです。Webデベロッパーは、CSSのmaskプロパティとSVGのmask要素を使うことで、画像編集ソフトを使わずにブラウザー上でマスクをかけられます。 この記事では、ブラウザーのサポート問題も含め、CSSとSVGを実際に試してみましょう。 記事を執筆している時点では、ほとんどのサンプルコードはWebKit系ブラウザーでのみ動きます。ただし、SVGベースのマスクは、より
もう使ってる？ たった3行で美しいSVGアニメが作れる「Vivus」がスゴい
まるで「見えないペン」で描いているような手描き風のSVGアニメーション。CSSとJavaScriptの知識があれば実装できる、定番アニメーション表現ですが、Vivusならもっと手軽に実装できちゃいます。 90年代初期のBLINKタグから、最新のCSS3トランジションやアニメーションに至るまで、Webページやアプリケーションの要素を移動する機能は、いつも魅力的な目標であり続けています。 今日では、SVGなどのテクノロジーを使えば、「見えないペン」と呼ぶエフェクトを比較的容易に実現できます。閲覧者は、まるで見えないペンで描かれたかのように、1ラインずつ表示される絵を目にします。 そのアイデアは新しいものではありません。よく知られているように、1953年の「Duck Amuck（カモにされたカモ）」にまでさかのぼると、のちにバッグス・バニーだと判明した見えざる手は、周りの世界を何度も消しては描き
Tumblrテーマをカスタマイズしてカフェサイトを制作 (1/2)
Webデザイナーへ向けて、Tumblrの魅力とテーマの制作方法を解説する本連載。前回は、テーマのコーディングから、9種類の投稿タイプをブログに表示する部分まで進めました。今回は、より細かな部分を仕上げていき、テーマを完成させます。 ページの追加とナビゲーションメニューの表示 Tumblrには、通常のブログ投稿とは別に、静的ページを作れる「ページ」機能があります。ページ機能を使うと、ブログの時系列とは関係なく固定して表示したいコンテンツを作成できます。 ページを作成しただけではサイトに表示されないので、テーマを修正し、ヘッダーのナビゲーションメニューに「アクセス」「メニュー」ページを追加します。 ページをメニューに表示するには、テンプレートタグを使います。メニュー項目をマークアップしているli要素を {block:HasPages} で囲むと、ページが1つ以上存在するときだけ、中の要素が出力
Tumblrサイトの作り方教えます−−企業事例とメリット (1/2)
「Tumblrでサイト作って」そんなオーダーにももう困らない！ 人気Tumblrテーマ「ZEN 2.0」「Apollo」の作者である佐野章核さんが、Tumblrを使ったサイト制作の方法を解説する新連載です。（編集部） 手軽な情報発信ツールとして、数年前から大きな話題になっているWebサービス「Tumblr（タンブラー）」。企業にも活用事例は広がっていて、「今度のショップサイトはTumblrで作りたい」なんて話もよく耳にします。しかし、流行っていることはなんとなく知っていても、実際にTumblrを使ったことがない、何ができてどうやるのか分からない……という方も多いのではないでしょうか。 この連載は、そんなWebデザイナーへ向けて、Tumblrの魅力とテーマの制作方法を全5回に分けて解説します。最終的にはTumblrを使ったWebサイトの制作・公開を目標にします。 いまさら聞けない、Tumbl
テーマ作成の前に知りたいTumblrカスタマイズの基本 (1/3)
Webデザイナーへ向けて、Tumblrの魅力とテーマの制作方法を解説する本連載。前回は、Tumblrの簡単な紹介と、利用するメリットを説明しました。今回は既存のテーマを簡単にカスタマイズする方法について解説します。 テーマを変更してみよう Tumblrは、好みのテーマに切り替えることで、サイトのデザインを大きく変えられます。「テーマを作る作業」が、Tumblrを使ったWebサイト制作であると言ってよいでしょう。 テーマには、Tumblrが公式に配布しているものと、企業や個人がWeb上で配布している非公式のものがあり、有料・無料を問わずたくさんのテーマが公開されています。公式のテーマの場合は、Tumblrのカスタマイズ画面の「テーマを見る」から「使用する」をクリックすると、自分のブログにすぐに適用できます。 また、「さらにテーマを検索」をクリックすると、Tumblrのテーマ一覧ページが開き、
サンプルで学ぶTumblrテーマの作り方 (1/2)
Webデザイナーへ向けて、Tumblrの魅力とテーマの制作方法を解説する本連載。前回は、既存のテーマを簡単にカスタマイズする方法を説明しました。今回は、いよいよオリジナルのTumblrテーマを実際に作っていきます。 Tumblrテーマの開発環境を準備しよう WordPressのようなCMSのテーマ制作では、MAMPやVagrantなどでローカル開発環境を構築して作業し、完成後に本番環境にコピーする流れが一般的です。Tumblrの場合は、ブラウザー上でテーマのHTMLを直接編集できるので、今回はHTMLファイルをデザインカスタマイズ画面に貼り付けて、保存とプレビューを繰り返しながら作っていきましょう。
パララックスをサクッと作れるskrollr
「skrollr」は、パララックス（視差効果）を簡単に実装できるプラグインです。 サンプルの動画を見ていただければわかりますが、非常に多彩なエフェクトが用意されており、基本的なパララックスサイトであれば、サクッと作れます。 step1 jQueryプラグインの読み込み jQuery本体をjQueryの公式サイトから、skrollrを配布ページからダウンロードしましょう。skrollrはGitHubで公開されており、ページ右下の「Download ZIP」というボタンからダウンロードします。 jQuery本体と「dist」フォルダに入っている「skrollr.min.js」を、利用するWebページのbodyの閉じタグ直前で読み込みます。 //(中略) <script src="jquery.min.js"></script> <script src="skrollr.min.js"></sc
誰も教えてくれない「コンセプト」の作り方 (1/3)
商品のコンセプト、例えば商品の魅力は、モニター上で素敵な言葉をいくら羅列してもなかなか伝わりません。コンセプトは商品や作品の本質そのものなので、言葉にするのは難しいのです。だから私はコンセプトを伝えるシンプルな一言を探します。それが「コンセプトキーワード」です。コンセプトキーワードは特別なものではなく、製品の開発や企画書のタイトルなどさまざまな場面でよく使われる言葉ですが、ここでは「商品の魅力を表現する」キーワードのことを指します。コンセプトキーワードを制作の柱としてコンテンツを作ることで、魅力の本質がユーザーの心に届くようになります。コンセプトキーワードを決めなければ広告作りは先に進まないので、いわば魅力を伝える力の源泉、ご本尊と言えるものです。 前回、サイトマスターはコンセプトをまとめる前に情報収集をすることを書きました。その上で魅力、ターゲット、タイミングを考えるわけですが、今回は魅
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
