2017.03.28
「CSSアニメーションを使ったボタンが作りたい！...でも、もともと設定が決められたアニメーションボタンだとつまらない...。」 そんな風にお考えの方にぴったりの「Animista」というサイトを本日はご紹介します。 このサイトでは、ブラウザ上で回転や色、向き、バウンドといった様々なアニメーションを自分の好きな設定で作った後、CSSコードの出力が無料でできるようになっています。 自分でアニメーションをカスタマイズしてオリジナルの動きを考えられる、というのがうれしいですよね。 さっそく、使い方をご紹介します。 「Animista」の使い方 「Animista」にアクセスをすると、ロゴと一緒に「TRY ME!」のボタンが表示されますので、それをクリックしましょう。 すると、次のようなアニメーシ
つづきを読む
2017.01.06
こんにちは！インターネットアカデミーの鹿野です！ 今回はCMS（コンテンツ・マネージメント・システム）について基礎的なお話をしたいと思います。 Web制作について調べたり、実際に制作をされていると「CMSという言葉は聞いたことがある」という方も多いと思います。 CMSとは？ CMSとはContent(s) Management System（コンテンツ・マネジメント・システム）の略で、ひとことで言いますと「Webサイトを管理・更新するシステムのこと」です。 もっと言ってしまえば"ブログのような感覚で"サイトが更新できるシステムです。 Webサイトの更新を行う場合、本来であればHTMLやCSSを編集して行うことになります。 そうすると専門知識が必要になるため、Webのスキルをお持ちでない方に
つづきを読む
2016.12.17
Twitter社が作った有名なCSSフレームワーク、「Bootstrap」。Bootstrap3を使ってサイトを作成している方も多いと思います。Bootstrap3から最新版であるBootstrap4に移行する際は、いくつか大きな変更点がありますので、事前にポイントを踏まえてから移行作業を行いましょう。 インストール方法とオプション インストールの方法は二種類あります。 Bootstrap4の公式サイトからzipファイルをダウンロード パッケージマネージャーを使ってインストール Bower、 NPM、 Meteor、 Composerの四種類のパッケージマネージャーでインストールが可能です。パッケージマネージャーでインストールする場合は、日本語リファレンスの「パッケージマネージャー」の項を
つづきを読む
2016.11.29
2017年1月～募集が始まるWebデザインコンテスト「たてよこWebアワード」の公式サイトが昨日公開されました！ このコンテストは、Webにおける縦書きの実際の利用を普及促進させることを目的とし、総務省後援のもと、産官学連携で開催されるものです。インターネット・アカデミーも協賛企業として、11月にはアワードを紹介する「縦書きレイアウト実践セミナー」を開催しました。今回のアワードでは、審査も担当することが決まっています。 縦と横の組み合わせによるデザインの広がり 今回公開された「たてよこWebアワード」の公式サイトは、コンテストの趣旨に則り、縦書きと横書きを効果的にデザインに取り入れられています。 さらに、スクロールエフェクトをかけることで、"新感覚"のWebサイトに仕上がっています。（これ
つづきを読む
2016.11.01
最近、オシャレなWebフォントが増えてますよね。 フラットデザインの流行、そしてWebフォントの登場から、フォントやタイポグラフィの重要度が高まり、洗練されたタイポグラフィをWebサイト上に使用することは、もはや当たり前になってきています。 今日は、海外サイトではありますが、オシャレなWebフォントを集めたギャラリーサイト「Typespiration」をご紹介します。 こちらのサイトを使えば、バナーやキャンペーン告知、LPなどで利用できるオシャレな英字フォントを入手することができます。 「Typespiration」の使い方 Typespirationにアクセスをすると、フォントリストがカード形式で並んでいます。その中から気になるフォントを選択しましょう。 クリックをすると、詳細ページに飛
つづきを読む
2016.10.29
インターネット・アカデミーでは、2016年11月16日(水)に総務省やWebにおける縦書きレイアウトに積極的に取り組んでいる企業を講師に招き、「縦書きレイアウト実践セミナー」を開催します！ このセミナーは縦書きWebコンテンツ作成技術の普及を目的としています。実は、インターネット・アカデミーの縦書きWebコンテンツ作成技術の普及活動は、昨年から始まって、今年で2年目の活動となります。 セミナーでは、これまでの活動のご紹介と、「たてよこWebアワード」の説明会、そしてWebサイトを縦書きにする実践作業を行って縦書きレイアウトについて知識を深めていただくことができます。 「たてよこWebアワード」とは 「たてよこWebアワード」は、2016年11月～2017年3月に実施される、Webにおける縦
つづきを読む
2016.10.28
Twitter社が開発したCSSフレームワーク「Bootstrap」を使えば、素早くカンタンに、レスポンシブデザインのWebサイトを作ることができます。 無料でダウンロードできるテンプレートを使って、より自由にWebデザインを楽しんでみませんか。 Bootstrapのテンプレートを活用してみよう Bootstrapの魅力の1つが、ナビゲーションメニューやフォームなどのUI（ユーザーインターフェース）の要素が既に定義されていて、手軽に使える点にあります。 また、世界的に人気があり、無料のテンプレートも数多く出回っています。 たとえば、以下のようなサイトがあります。 Start Bootstrap https://startbootstrap.com/ 「Start Bootstrap」は
つづきを読む
2016.10.25
インターネット・アカデミーでは、2016年11月25日(金)より、Bootstrap基礎講座を特別講座として開講します。 本講座は、レスポンシブなWebコンテンツを作成するためのフレームワークとして人気の「Bootstrap」について、短時間で学ぶことができます。 Bootstrapとは Bootstrapは、Twitter社が開発したCSSのフレームワークです。あらかじめ用意されているCSSの設定を使うことで、素早く、そして簡単にCSSでWebサイト制作を進めることができます。 また、レスポンシブWebデザインにも対応しているため、Webサイトのマルチデバイス対応をする際の開発スピードを高められる点も魅力のひとつです。 その他にも、次のような魅力があります。 導入が初心者にも簡単にできる
つづきを読む
2016.10.18
今日は、WebデザインやWebサイト制作に役立つジェネレーターサイト「Transformicons」をご紹介します。 レスポンシブWebデザインでよく使われる「ハンバーガーメニュー」や「ローディングムービー」などは、CSS3やJavaScriptを使って作成するのが一般的ですが、オリジナルで作ろうとするとかなり手間がかかります。 そんなとき、この「Transformicons」を使えば、使用頻度の高いアイコンをさくっと作成して使用することができます。 「Transformicons」の使い方 「Transformicons」にアクセスすると、このジェネレーターで作ることができるアイコンが並んでいます。ハンバーガーメニューや追加、離脱ボタンなど、よく使うものが並んでいます。 複数アイコンが並
つづきを読む
2016.09.10
Webページの装飾（レイアウトや見た目）を決める言語、CSS（Cascading Style Sheet）。 その3つ目のバージョンとして今なお規格策定中の言語が、CSS3です。 そのCSS3からは、文字を縦書きにしたり、ウェアラブルデバイスなどで活躍する角丸の輪郭を表現できたり、透過、グラデーションなど、幅広い表現ができるようになりました。 そんなCSS3で新たに加わったのが、アニメーションの表現です。 従来は、アニメーションといえばFlashやJavaScriptで表現してきましたが、CSS3でアニメーションが表現できるようになったことで、より手軽にWebページ上でアニメーションを導入することができるようになりました。 今日は、手軽にCSS3アニメーションを自分のWebサイトに採用する
つづきを読む
2016.08.11
今日は、HTMLとCSSのコーディングに役立つチートシートをご紹介します。 ちなみに、「チートシート」というのは、一言で言うなればカンニングペーパーのことで、本来覚えておかなければならないことを1枚の用紙にわかりやすくまとめたものです。 プログラミングやWebデザインでよく使われている用語ですが、最近の、特に海外のチートシートはインフォグラフィックスとして優れたデザインのものも多く、それだけで参考になるものばかりです。 本日ご紹介する「HTML AND CSS CHEAT SHEET」は、HTMLやCSS、Webデザインを学び始めたばかりという方々にぜひ使っていただきたいポイントが満載です。 たとえば、HTMLやCSSの基本文法はもちろん。 RGBカラーの考え方といったWebデザインの基礎
つづきを読む
2016.06.24
Webデザイナーは作品さえ良ければ資格は必要ない、という意見もあります。 しかし、質のよい作品を安定して作り続けるためには、確かな理論や技術の裏付けが必要です。 資格をとることで、よい作品をつくるための基礎をしっかりと身につけるとともに、就職の際も自信を持ってアピールできるようになります。 Webデザイナーとして有益な資格をとり、ライバルより一歩リードできる人材になりましょう。 本日は、Webデザインをする上で役に立つ資格をご紹介します。 ■Webクリエイター能力認定試験 Webデザイナーとして実務に直結するベーシックスキルを問われる「Webクリエイター能力認定試験」は、是非とっておきたい資格です。 ビジネスシーンにおけるWebサイトは、見た目のインパクトよりも、利便性や汎用性の高いユニバ
つづきを読む
2016.06.10
ご無沙汰していました、海外から最新情報をお届けするニシャンツです！ 今日は、Webブラウジングの未来について書こうと思います。 今皆さんは、空いた時間や何か調べるときに、PCやスマホでWebブラウジング、つまりネットサーフィンをよくされると思うのですが、 将来のWebブラウジングはそれだけにとどまりません。 近い将来、ヴァーチャル・リアリティーとWebが融合して、 全員がどこにいてもこんなふうにスクリーンメガネをかけて... 常時Webブラウジングをするようになるかもしれません。 現在Mozillaがヴァーチャル・リアリティーAPIの開発を進めており、 たとえばショッピングに行ったとき、 ほしい商品を手に入れたときの様子をヴァーチャル・リアリティーで その場で体験できるようになるかもしれま
つづきを読む
2016.04.30
自分の力でWebサイトを作れるようになったら、テンプレート素材の活用をしてみましょう。 正しく知識がついていれば、テンプレート素材を活用することで作品を作るスピードもクオリティもぐっと上がるはずです。 そんなとき、いいテンプレート素材を探したいという方にオススメなのが、「Freebiesbug」です。 WebデザインのPSD（Photoshopデータ）やIllustrator素材、HTMLテンプレートなどを無料配布していて、デザインやコーディングで使える素材を探したいという方にピッタリです。 左メニューにカテゴリ一覧が載っていますので、目的の素材タイプにあわせて探してみて下さい。 欲しい素材が見つかったら、詳細ペ―ジを開いて、ダウンロードボタンからダウンロードしましょう。 全て無料なので、
つづきを読む
2016.04.24
本日は、無料のコードエディタであるBracketsのおすすめエクステンションを紹介していきたいと思います。Bracketsは、もともとはAdobeによりプロジェクトが設立されて、オープンソースのプロジェクトとして、多くの方がその発展に貢献をしています。 このBracketsの魅力は、なんといってもカスタマイズ性です。Bracketsの場合には、エクステンションと呼ばれる拡張機能があり、それを自由にインストールして、自分のコードエディタを自分の使いやすいように設定しておくことができるのです。 今回は、特にフロントエンドの開発をしていく上で、Bracketsに入れておいたほうが良いおすすめのエクステンションを紹介していきたいと思います。 Shizimily Multiencoding for
つづきを読む
2016.04.14
Photoshopで画像をぼかした状態に加工するのは難しくありませんが、JavaScriptとCSSでぼかし加工をすることができれば、アニメーションを付けたり、ぼかしの微調整をソースコード上で行うことができて便利です。 今日は、背景画像にぼかし加工をかけることができるjQueryを紹介している「Background Blur」のサイトをご紹介します。 Background Blur の使い方 まずは、必要なファイル一式をダウンロードする必要があります。 GitHubのbackground-blurのページからファイルをダウンロードしましょう。 jQueryを適用したいHTMLファイルに、下記の // <pre
つづきを読む
2016.01.25
縦書きレイアウトのサイトと言えば、和食のお店、旅館などのイメージが強いのですが、こんなオシャレでアートな縦書きの使い方があったのか！ と思い知らされるサイトを発見しました。 「クロニクル、クロニクル!」という展覧会の公式サイトです。 「1年の会期のうち、展覧会を2度、名村造船所跡で行う」という開催概要をそのまま表すかのように、コンテンツが縦に2つ並んでいます。 アイキャッチの縦書きは画像で作られていますが、本文中の見出しには縦書きが実装できるCSSのwriting-modeプロパティが使われています。 こんな風に縦書きをWebデザインに取り入れるのもステキですね。 ちなみに、総務省後援の「縦書きWebデザインアワード」の作品募集締め切りは2016年2月8日(月)までです。 インターネット・
つづきを読む
2015.11.04
Webサイトの見た目を指定する言語であるCSSの最新バージョンが、「CSS3」です。 その特徴の一つが、グラデーションの表現を数字やアルファベットで指定することができるということにあります。 画像を作る必要がないため、気軽に記述を変えたり、JavaScriptと連携させて色やそのグラデーションに変化を与えたりすることができます。 そんな、グラデーションをCSS3で表現するために、さまざまなジェネレーターが世の中に生まれていますが、本日はその中でも使い勝手が良くてお勧めできる「Blend」をご紹介します。 Blendの使い方 使い方は簡単。両サイドのパレットから好きな色を選びます。 パレット上部の「Flat UI」ボタンをクリックすると、選択できる色の数が増えます。 色が決まったら、真ん中に
つづきを読む
2015.09.22
インターネット・アカデミーでは、10月20日(火)に「縦書きレイアウトのWebコンテンツ実践セミナー」を実施します！ 今回のセミナーは、7月に行った「縦書きレイアウトのWebコンテンツ実践セミナー ～七夕の短冊を作ろう～」の第二回目の開催となります。（気になる方、縦書きレイアウト技術について知りたい方は前回ブログ「七夕は縦書きレイアウトで願いを込めよう」をぜひご覧ください！） 企業のWeb担当の方、制作会社にお勤めの方で、HTMLの仕組みを理解されている方であればどなたでもご参加いただくことができます。 講師には、インターネット・アカデミーの鈴木先生の他、企業のWeb担当の方、総務省や大学講師、Webにおける縦書きレイアウトに積極的に取り組んでいる企業など大変豪華な方々をお招きしています。
つづきを読む
2015.02.05
これまで、インドからWebの情報を書いてきましたが、2月からボストンラボに異動し、MIT/W3Cの客員研究員として勤務することになりました。インドで生まれ育った私にとっては、雪を見ることも初めてで、ボストンの毎日は新鮮な日々です。もともとの予定では、1月26日の月曜日からMITで仕事を始める予定でしたが、先週、山田先生がブログ記事を書いている通りの暴吹雪でMITでの仕事開始がずれ込んでしまいました。 W3Cでの業務は、主にWebPlatform.orgという、W3Cをはじめアメリカの名だたるIT企業が協賛しているWebサイトの運営を中心に行っていきます。W3Cが日々、仕様策定をしている新しい技術やAPIが出てきたときには、その内容をWebPlatform.orgに記載していきますので、最新
つづきを読む
