『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年3月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材/配色やWeb制作といった最新トレンドも公開中。
![ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP](https://cdn-ak-scissors.b.st-hatena.com/image/square/3e6399992cd565633659c258900876a8213912c7/height=288;version=1;width=512/https%3A%2F%2Fphotoshopvip.net%2Fwp-content%2Fuploads%2F2016%2F05%2F494517912_640.jpg)
というわけで本年度、すごいなとおもったWebサイトをご紹介。 先に15サイトを紹介したのち、最後に大賞5つを紹介します(大賞が5つもあることに関しては気にしないでください) αブログならぬ、αサイト!レッツスタート! ※サイトデザインは旬ものなので、時期を過ぎるとリンク切れ、デザインの変更があります。今すぐ楽しんでください。 ノミネート15作品 ゲスの極み乙女。 official website サイドバーから各種ページに移動した時に、地味に動くのがなんかむかつく(いい意味で)。とくにMEDIAページね。 そんなわけで、このサイト、デザインというよりインパクトで受賞。 胸やけ・吞酸劇場〜胸屋家の酸っぱい1日 このFlashの死んだ時代に、あえてオールFLASHに挑むその度胸。 さらにそれぞれのコンテンツが微妙に面白くてやばい。やばいというかヤヴァイ。FLASHヤヴァイ賞。 STAGEWOR
こんにちは、コプロシステムWebデザイングループのディレクターの石川です。 先日...といってももう2週間経ってしまいましたが、11月1日(金)に日本印刷技術協会(JAGAT)様の「印刷会社のためのWebデザイン2013」というセミナーで講師として登壇させていただきました。 内容は三部構成で、 2013年 Webデザインのトレンドを振り返る(石川担当) jQueryの基礎とデザイン事例(株式会社まぼろし 西畑 一馬さんご担当) UIデザインの基本とスマホ・タブレット対応(クックパッド株式会社 池田 拓司さんご担当) という、私以外のお2人は本の執筆やブログなどで超がつくほど有名な方々なので、セミナーでご一緒になれて誇らしいというか。非常に嬉しかったです:) →セミナーレポートはこちら 私は上記の通り、「2013年 Webデザインのトレンドを振り返る」というテーマで話をさせていただきました。
UnitePlayer はモバイルとゲームに特化した HTML5 な音楽再生プレイヤー UnitePlayer は、モバイルブラウザ上で動作するゲームに音をもたらします。 扱いが難しい Mobile Safari や Android ブラウザの音周りをフォーマット化し、とっても扱いやすくします。 フィーチャーフォン用のソーシャルゲームが大流行な昨今ですが、 フィーチャーフォン用のゲームって音が無いですよね? そのゲームをそのままスマートフォン向けにコンバートしても、音がならずに寂しい感じですよね? 2012年は UnitePlayer で BGM も SE も鳴らしちゃいましょう。 そして没入感や色々なものを高めちゃいましょう! PCブラウザでもそのまま動くから、横展開もお手軽に! UnitePlayer なら iPhone でも BGM と SE を擬似的に同時再生できますよ。 Unit
Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門 2013-03-14 / 2014-03-12 Webサイトの表示速度を気にすると、CSSやJavaScriptのminify、gzip、CSS Sprite、画像の最適化などの面倒な作業が発生します。 Grunt.jsとは? Grunt.jsは、サーバーサイドJavaScriptのNode.jsを使用したCUIのビルドツールです。 タスクを設定しておき、それらを自動化します。 コマンドプロンプトやターミナルなど、いわゆる「黒い画面」を使います。 Grunt.jsの現在のバージョンは0.4.1です。 バージョンが0.3から0.4になったことで、大きく仕様が変わりました。 Grunt.js v0.4ではgrunt-cliをインストールしてプロジェクトごとにGruntやプラグインをインストールして使用します。 プラグイ
JavaScriptでは、本来のオブジェクト指向言語とは少し異なり、 正確なクラスの定義は出来ません。 しかし、JavaScriptでは強力な関数定義方法が用意されていますので、関数をクラスとして 実装する事で対応するのが一般的です。 今回の記事では、そんなJavaScript流のクラス定義方法をソースコード付きで解説します。 クラス定義とインスタンス生成時のコンストラクタについて クラス内のメンバ変数を定義しよう インスタンスメソッドを定義しよう クラス変数とクラスメソッドについて クラスを継承してみよう インスタンスメソッドのオーバーライド クラス定義とインスタンス生成時のコンストラクタについて JavaScriptでは、クラスの定義は関数の定義と同様に『function』を用いて定義します。 関数名がクラス名となり、関数内の処理がクラスのコンストラクタとなります。 定義したクラスをイ
日本は世界に知られるゲーム大国でもあり、「スーパーマリオ」「ドラゴンクエスト」「どうぶつの森」などなど、これまで数々の世界的ゲームを生み出してきています。そんなゲームを生み出す「ゲームデザイナー」。必然的に人気の職業でもあります。 ゲームデザイナーは「ゲームプランナー」とも呼ばれ、ゲームの基本設計(=開発)をする仕事です。広範囲の開発技術や知識を要するだけでなく、ゲームの流行にも敏感でなければいけません。ゲーム設計は高度な技術を要しますが、一つの大きな世界観を生み出し世界に発信できる可能性がある面などは、やりがいのある仕事といえるでしょう。 キャラデザインは別の職業 ちなみに、ゲームデザイナーはゲームの登場人物のキャラクターデザインをする仕事のように勘違いされることもありますが、それは勘違い。キャラクターデザインをするのは、グラフィックデザイナー(CGデザイナー)の仕事となります。 ゲーム
この記事は賞味期限切れです。(更新から1年が経過しています) 前編に引き続き、FlashCS6のスプライトシートをjQueryで処理するお話です。 処理をライブラリにまとめましたので、ご紹介します。 FlashSprite.js Flashspritejs by mach3 Adobe Flash CS6+ で出力されたスプライトアニメーションシートを再生するjQueryベースのライブラリ。 前回の処理に加えて停止や逆再生、各種設定やイベント発火等の機能を付け足した物です。 使い方は上記URLで概ねわかると思いますが、簡単にご紹介しておきます。 簡単な使い方 1. FlashCS6+でスプライトシートを生成する FlashIDE上で、ステージに配置したアニメーションインスタンスを右クリックし、 コンテキストメニューから「スプライトシートを生成」を選択してダイアログを開きます。 データ形式は
長らく仕様策定に手間取っていたHTML5が大きく推進することになった理由の一つには、やはりAppleがiPhoneのFlashへの非対応を発表したことがあるでしょう。HTML5自体はいまだ完全には標準化されていませんが、主要ブラウザでは既にcanvasによる描画処理をサポートするようになっており[1]、今後徐々にFlashからHTML5への移行が進んでゆくものと思われます[2]。 FlashのプロジェクトをHTMLに変換するツールにはSwiffy(Google)、SWF Animation Converter(マルチでバイスlab.)など何種類かありますが、今のところブラウザ互換性や、ActionScript部分への対応状況などの問題により、これといった決め手がないのが現状です。 その中で、Adobe Flash Professional CS6にcanvasアニメーション用フレームワーク
CreateJS を使ったWebアプリをいくつか作ったのですが、iPhone はサクサクでも Android でやたらハマる。 Android 2.3 で最適化したつもりのものが 4.0 の標準ブラウザで落ちたりする。 機種や OS のバージョンにより動作がさまざまなため確認しきれない。 というとこでハマったポイント3つを共有します。 誰かもっとよい解決策を教えてくれるとありがたい。 即死ポイントその1 Android 4.0.4 で Canvas をリサイズするとブラウザが落ちる 回避策 Canvas 領域を広めにとっておき、Canvas ではなく Container 側をリサイズ。 はみでた部分は css でトリミング。 これで落ちなくはなるが全体的にボケる。 2013.7.7 追記 その後、以下の方法を試したところ落ちずに動作すことが確認できました。 描画とかGPUアクセラレーション
何かと不透明なあたり 気がつけば一ヶ月ほどブログを更新していませんでした。リハビリ記事です。 今回は、GPUを効かせる == それに関連するプロパティ(ただしOSやバージョンによって何がトリガかは厳密に異なる)を適用したら挙動が改善した、というようなノリの体験TIPSをゆるくまとめました。 このあたりの振る舞いについては、描画パフォーマンスの問題として、それなりに明らかになってきているように思います。WebKitのレンダリングプロセスにはじまり、GPU命令のサポートが受けられるのはどんな操作だとか、GPUへ処理が預けられるレイヤーの生成がどーとか、最近よく見聞きします。 自分が業務で扱っているスマートフォン向けのWebサービスでは、このような描画パフォーマンスの問題は、スクロールパフォーマンスと合わせて非常にクリティカルです。この辺りについてのロジカルなまとめは、某氏が近日中にまとめるらし
回転式のカード選択UIになります。 webkit系のブラウザで確認してください。(safari,Google Chrome ) スマートフォンで動作することを考慮し、制作しました。 よって、dom構造を元に制作しております。 iPhoneのみシェイクによる(端末を振って)合成が行えます。 また、シェイクによる合成スタートはアニメーションが異なります。 (カードがバラバラになります。) 【スマートフォン閲覧方法】 ページ右の「Smart Phone」のアイコンをクリックするか、 以下のURLをクリックすると確認出来ます。 【URL】 http://jsrun.it/panicdragon/blTa 【合成方法】 PC:左右のボタンで選択→ベースカードをクリック→素材カードをクリック→合成スタートボタン スマートフォン:カードをフリックで選択→上にフリックでベースカード、素材カードを選択→シェ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く