文:神乃木リュウイチ思わず真似したくなる、デザインや動きが美しいアニメの特設サイト8選Twitter12FacebookGoogle+はてブPocketボリュームのある本、ゲームなどをイベントやオンラインで配布するときには、Webサイトも凝ったデザイン・凝った動きにしてみたいものです。そんな時、「こんな感じにしたい!」とインスピレーションを得られそうなサイトを、今回は日本のアニメの特設サイトからまとめてみました。まとめ劇場版「あの日見た花の名前を僕達はまだ知らない」公式サイトURL:http://www.anohana.jp/デザインは、ビジュアルを邪魔しないシンプルなデザインで、キーカラーは緑色です。ジャンプ率も低めで、落ち着いた印象を与えるデザインになっていますね。動的表示には、jQuery系のライブラリがふんだんに使用されています。描画の遅延や画面サイズによるズレ等を防ぐため、アニメーションはCSS3のtransformプロパティを使って制御されています。この制御にはjQueryプラグインの「Transit(デモ・配布サイト)」が使用されています。個人的には、「イントロダクション」を押した時の「待たせる動き」が、確実に目線が誘導されて面白いと感じました。』公式サイトURL:http://www.kiminona.com/明朝系とゴシック系のフォントを使い分けつつ、売りの一つである背景ビジュアルを効果的に使用したデザインが特徴的です。キーカラーは青色でしっかりまとまっています。ページは1ページ構成ですが、その動きは「これでもか!」と言わんばかりの様々なギミックが凝らされています。「STAFF」部分で背景が固定されて文字だけ流れる動きは「パララックス効果」といい、最近のウェブサイトでは時折見かける演出になっていますね。スクロールするとコンテンツがフェードインする演出もjQueryで組まれています。このページでは使用されていませんが、スクロール時に要素がアニメーションしながら出てくる演出には、jQueryプラグインの「FadeThis」が便利です。「陽なたのアオシグレ」公式サイトURL:http://www.shashinkan-aoshigure.com/aoshigure/近年設立されて注目を浴びている「スタジオコロリド」の劇場版映画のサイトです。コンテンツの量は少ないですが、パステル調でカラフルに小道具が配置されたデザインがオシャレですね。ページ遷移は横スクロールで行うようになっており、背景画像が時間差でアニメーションするようになっています。Position」を使用していますが、レンダリングがCSS3ではなくanimateを用いているため、ブラウザ上でのパフォーマンスは少し低め。サイトは3年前のサイトですので、今作るならCSS3のアニメーションで作りたいところですね。http://www.no-6.jp/ビジュアル以外は白ベースで統一されたウェブサイト。動的な部分は全てFlashで組まれていますが、各ページへの移動時のアニメーションのセンスが非常に良く、ぜひ参考にしたいデザインです。アニメ「PSYCHO-PASS」公式サイトURL:http://psycho-pass.com/ロードからがっつりアニメーションしてくるタイプのサイトです。キーカラーは黒と緑色で、近未来的なデザインでまとまっています。アニメーションの実装はFlashです。トップページから先は普通のHTMLで組まれているため、あくまでトップページを表示するためのギミックといったところでしょうか。「シドニアの騎士」公式サイトURL:http://www.knightsofsidonia.com/世界観にマッチした各種アニメーションがかっこいいウェブサイトです。派手なアニメーションはありませんが、高めのジャンプ率とゴシック体でしっかりと訴求してくるデザインになっています。ページはFlashで組まれているため、jQueryなどは使用されていません。新劇場版』公式サイトURL:http://kokaku-a.jp/動的なアニメーションは控えめですが、世界観を的確に表現したデザインが印象的なサイトです。こちらはFlashではなくJavaScriptでの実装。各種UIパーツの動きなどはjQueryで書いているようです。しても、トップ下部のリンクに「日本サイバー犯罪対策センター」があるのは笑ってしまいました。http://www.aldnoahzero.com/アニメのWebサイトとしてはかなり異質なWebサイトです。アニメのサイトといえば、普通はメインビジュアルがあって、ストーリー紹介があって......というデザインを期待しますが、このサイトは全ての情報が時系列順にまとめられており、タイル内のサムネイルをクリックすることで情報がページ内に出現する設計です。動きの実装にはjQueryが使われていますが、かなりの量をフルスクラッチで書いている模様。似たようなタイルのアニメーションを実装したい場合には、IsotopeというJavaScriptのライブラリを使用すると少しだけラクできるかもしれません。まとめゼロからWebサイトのデザインや動きを考えるというのはかなり難しいものです。商業Web制作の現場でも、Webデザイナーたちは日常的に他のサイトを巡回しては、「このデザイン良い」「真似したい」という秘蔵のリストを蓄えておき、次の案件が来た時にそれを参考にしてデザインを作っていたりします。私が請けるWebサイト制作でも、基本的に「参考にしたいサイト」「イメージに近いサイト」をお伺いした上でデザインやサイトの構成を考えていっています。「こんなサイトを作ってみたいけど、どうすればいいか分からない......」といった悩みがある方は、お気軽にメッセージフォームからご相談くださいね。本サイトの編集長でもあります。東方Projectを入り口に同人文化にハマり、2008年からサークルとして活動しています。活動は音楽制作とWeb制作の二本立てで、最近では他のサークルさんのWebサイト制作などに多く携わっています。しろたんは2匹(公称値)保有しています。白銀GIFアニメの代わりにCSS3のstepプロパティを使ってみよう!「Webサイト上でアニメーションを表示させる」といえば、筆頭に上がるのはアニメーションGIFで、少し前になるとFlashなども多くありました。年間数万円しますが、納めないと仕事になりませんからね。そんなAdobe税に衝撃の展開が訪れたのは今年の4月のこと。神乃木リュウイチWebサイトや印刷物制作にとっても便利なアイコンフォントとその使い方Webサイトや印刷物を作っていると、「ここ、文字が多いしアイコンとか入れたいな......」と思うことが結構あります。そんなとき、自分でアイコンを作っていては時間がいくらあっても足りませんよね。神乃木リュウイチTwitterで宣伝するときに覚えておきたい、みんなやってる基本テクニックこんにちは、神乃木です。夏のコミックマーケットが来週末に迫ってきましたね。Twitterでも各サークルの告知ツイートが大量に流れ、お祭りの季節を実感します。神乃木リュウイチ同人サークル必見!CDプレスにおすすめの業者と選び方(2018年版)こんにちは、編集長の神乃木です。音楽ジャンルでの同人活動をやっていると、プレスでCDを作りたくなることがあると思います。神乃木リュウイチ絵が描けなくてもできる、写真を背景イラストのように加工する方法(教室編)私は、まったくもって絵が描けません。人物画はもちろんのこと、背景画もとてもお粗末なものです。同人イベントで成否を握る、サークルの「陳列」についてのお話また二週間ぶりとなります。M3直前となりますが、無事生産を終えて一息とか言っている場合じゃない程度に仕事やら日常やらに追われています。まとまった休みが欲しいところです。み今は買い時?2017年後半のグラフィックボード(グラボ)の選び方と買い方パソコンの新調やカスタマイズを行う際に、まず重視したいのがグラフィックボードの性能だ。近年はVR対応やGPU演算のソフトウェアも増えており、その需要はますます増えているといえるだろう。ロゴデザイン・特設Webサイトの制作を担当させていただきました。いう字に母は在り」のWebサイト制作に携わらせていただきました。艦これアレンジCDTwitter・RSSフィードTwiter、RSSで最新記事の情報をお届けしています。Proを購入してみた。