高齢の方向けウェブサイトデザイン 8つのポイント

こんにちは。デザイナーの那須です。最近は、ご高齢でもパソコンやスマートフォンでインターネット(※)を利用する方が増えていますね。総務省によると、2016年には60歳以上の方の約60%、60~64歳の方に限定すると80%以上が、インターネットを利用していま…

UI向上に必須。マイクロインタラクション10選

こんにちは。デザイナーの寺田です。TIPS vol.59で「WebライティングでUIデザインの品質を高める」をご紹介しました。今回は、ライティングとともにWebサイトの品質を高めるために、ぜひこだわりたい、マイクロインタラクションについてご紹介します。Google…

gulpを使って ファイルの徹底効率化をはかる

HTMLでサイトを構築するとき、デザインや見栄え等をチェックすることはもちろんですが、成果物をより良くするために、ソースやファイルにチューニングを加えることがあります。HTML、CSSのソースコード見直しや、整理、画像のファイル圧縮やHTMLのバリデーシ…

秋を感じさせるデザインのポイント

こんにちは。デザイナーの那須です。 9月に入り、秋を感じる涼しい日も増えました。 今回は、これから増えてくる「秋らしいデザイン」の要素を、実例と共にご紹介します。※紹介する事例の引用元サイトは、季節性のあるキャンペーンサイトも含まれており、一…

線や塗りなど描画が美しいSVGアニメーションの作り方

ロゴやアイコンなどをWebサイトで拡大・縮小しても劣化させたくない場合に使用されるSVG画像。SVGには、gifのように画像をアニメーションさせることができます。gifや動画などと違い、ベクター形式であるSVG特有の滑らかな動きを表現できます。 今回は、XML…

Google AdWords 管理画面
 リニューアル版を試してみよう

2017年8月ごろからAdWordsの管理画面リニューアル版が公開され、新しいデザインにて使用できるようになりました。 グラフが増えたり知りたい情報が大きくなっていたり、トップ画面をみるだけでも視覚的なデザイン・レイアウトになったことがわかります。 見…

構造化データをお手軽に データハイライターを使ってみよう

検索エンジンの最適化において、SEOの対策は欠かせないものとなっています。 サイト集客の方法はスマートフォンの普及、SNSの一般化など様々な要因から多様化しています。 最新の傾向としてはデータ最適化をするだけでは十分とはいえず、コンテンツの内容・…

vol.73 3DソフトBlender入門

こんにちは。デザイナーの寺田です。 デザインの表現で3Dによるものが、一般的になってきました。 以前、Photoshopによる3D MODELING「を紹介しましたが、 今回は「Blender」による3Dモデリングの作成方法をご紹介します。 そもそもBlenderとは? Blenderは…

vol.72 夏を感じさせるデザインのポイント10選

こんにちは。デザイナーの野中です。7月も後半に入り、今年も夏本番の季節になりました。今回の記事では、この季節に多く目にする夏を感じさせるグラフィックデザインの要素とは何か、実際の事例をまじえながらご紹介します。 ※紹介する事例の引用元サイトは…

vol.71 srcsetで画像をレスポンシブやRetinaディスプレイに最適化

こんにちは、Webエンジニアの佐藤です。Web上で、ウィンドウサイズが変わった場合やRetinaディスプレイなどの高解像度の場合、その状況に対応した画像に自由に切り替えることができるsrcset。今回は、画面解像度やウィンドウサイズによって最適な画像に切り…

vol.70 映画にみる色使いのこだわり

みなさんは映画をよくご覧になりますか?チケット代が高い、映画選びを失敗したくないなどありますが、TVドラマとは違い、監督の色・こだわりがよく見えるのは映画のよいところだと思っています。 今回は数多ある映画の中で色彩が印象深いものをセレクトしま…

vol.69 2017年度版 Webデザイン・UIのトレンド10選

こんにちは。デザイナーの野中です。 6月も今日で終わり、早くも2017年の後半が始まりました。 Webの世界では、2016年はユーザーの操作にさりげなく感覚的に応えるマイクロインタラクションや、動画を全画面に採用したWebサイトが主流になり、目で見るだけで…

vol.68 常時SSL化のススメ Let's EncryptでWebサイトを暗号化

モバイルを中心にインターネットに接続できる機器の飛躍的な増加により、多くの人がインターネットから情報を取得するようになりました。 利用者母数の圧倒的増加によって、ユーザーを狙った悪意ある攻撃などが激化する中、それらの攻撃からユーザーを保護す…

東京オリンピックで活躍。 ピクトグラムについて。

こんにちは。デザイナーの寺田です。みなさんは、はじめて来たデパートで、トイレに行きたくなったとき どうやってトイレを見つけますか。 また、海外旅行で国外のデパートだったらどうするでしょうか。店員さんに聞くこともあると思います。天井に吊るされ…

vol.66 Flexboxの仕様と柔軟なボックスレイアウト

こんにちは、Webエンジニアの佐藤です。Webサイトのコーディングで常に頭を悩ませているのが、上下中央揃えや、要素の高さを合わせるなどのボックスレイアウト。単純そうにみえて一筋縄ではいかなかったレイアウトを「Flexbox」の導入で解決しようという方が…

vol.65 オフィスで使う印刷紙 企画書に最適な用紙とは!?

みなさんはオフィスで印刷するとき、どんな紙を使っていますか?ふだん何気なく使っている紙は、実は紙の種類で印象も触り心地も変わってきます。 今回オフィスで使う印刷紙、とくに企画書を印刷する際はどのコピー用紙が最適なのか比較してみました。 オフ…

vol.64 これでもうアイコンがにじまない!SVGのデータ作成で気をつけるポイント

こんにちは、デザイナーの野中です。みなさんはデザインしたアイコンをブラウザ上で見た時にアイコンがぼやけたりにじんで表示されてしまった、という経験がありませんか?下の図でも、imageAははっきり表示されていますが、imageBはぼやけています。 image …

vol.63 node.jsアプリをLinuxサーバーで公開してみよう

前回のnode.jsに触れてみよう サーバーサイドJSとはに引き続き、node.jsをサーバー上で動かします。 ひとまずnode.jsを動作させてみたい、と思い前回のTIPSで紹介したフレームワーク「Express」をnode.jsと一緒にインストールし設定、構築します。 現在動作…

vol.62 企画発想のコツ

こんにちは、デザイナーの寺田です。AI(人工知能)や技術の進歩により、わたしたちの働き方は日々変わりつつあります。現在の働き方では、就業者の49%がAIに変わってしまうともいわれています。 雑誌や書籍でもAIについての特集や本が増え、さまざまな業種…

vol.61 CSS肥大化を抑える Sassを使ったコード設計の実践

こんにちは、Webエンジニアの佐藤です。 前回は CSS肥大化を抑える 破綻しないコード設計とSassの導入についてご紹介しました。 今回は、私が業務で使っているCoda2でのSassのインストール・コンパイル方法と、 また前回を踏まえて、実際に業務での実践で意…

vol.60 node.jsに触れてみよう サーバーサイドJSとは

こんにちは。ウェブエンジニアの毛利です。 私がウェブ制作に携わるようになった2013年頃から2017年にかけて、ウェブ開発を取りまく環境が目まぐるしく変化していると感じます。PCブラウザの急速な進化、マルチブラウザ化、非Flash化、スマートフォンサイト…

vol.59 WebライティングでUIデザインの 品質を高める

こんにちは。デザイナーの寺田です。 ここ最近、UI/UXという言葉を当たり前に聞くようになりました。 UIデザインが増えて、ユーザーはWebサイトをより直感的に 操作することができるようになりました。 最近ではGUI(グラフィックユーザーインターフェース…

CSS肥大化を抑える 破綻しないコード設計とSassの導入

こんにちは。Webエンジニアの佐藤です。小規模なWebサイトや単体ページならいざ知らず、大規模Webサイトなどを開発する際、CSSが必要以上に肥大化し、気付けば構造が破綻してしまっていることはありませんか? Bootstrapに代表されるCSSフレームワークの選択…

vol.57 Raspberry PiにUbuntu Mateを入れてみよう

あけましておめでとうございます。2017年最初のTIPSです。 Raspberry Pi(ラズベリーパイ)という小型のコンピューターを入手したため、何かできないか?と、すぐにできそうなことを実践してみました。 www.raspberrypi.org 「Raspberry Pi」とはイギリスの…

vol.56 Adobe Premiere Pro 初めてのカラーグレーディング

こんにちは。ディレクターの白子です。 最近Youtubeやvimeoなど高画質で動画の配信が可能となりました。 これまで動画を撮ったことのある人は「せっかく高画質でアップロードできるのだから、色味も自分の思うように補正してみたい!」と思ったこともあるの…

vol.55 人気フレームワーク LaravelをMacにインストールするときの注意点

こんにちは。エンジニアの毛利です。 Webサイトやアプリケーション開発にフレームワークを使うことがあります。 直書きでなんとかなってしまう分量であれば、あえて使う必要はないかもしれません。 ですが中規模・大規模プロジェクト、または長期にわたるプ…

vol.53 撮影がもっとスムーズになる! 撮影前準備のポイント

こんにちは、アシスタントディレクター兼エンジニアの富澤です。近年、映像制作をするために必要なプロユースのビデオ機材や編集ソフトなどが比較的安い値段で購入できるようになり、 個人でもプロに近いクオリティで映像制作をすることができるようになりま…

vol.52 「選ぶ」だけじゃない!自分で作るWordPressのオリジナルテーマ

こんにちは、エンジニアの佐藤です。今や主流となったブログソフトウェア、wordpress。wordpressには無料で使える多くのテーマがありますが、自分で作るオリジナルのテーマを使いたい・作りたいと思う方も多いはず。 HTML・CSSの知識があること、wordpressの…

vol.51photoshopでここまでできる!ビデオタイムラインのアニメーション

こんにちは。イラストレーターの西山です。 比較的簡単なショートアニメの作り方をご紹介しましたが、今回はBOELアニメーション「shimeji」をもとに、専門の動画編集ソフトで作るような複雑でカット数の多い動画をphotoshopのビデオタイムラインを使って作る…

vol.50メジャーアップデート! 高速化したjQuery3.0の特徴

こんにちは。エンジニアの毛利です。 jQuery3.0がリリースされました。 2.x系からのメジャーアップデートで、マイナーアップデートにはない大きな変更を伴います。 また、今までInternet Explorer 8(IE8)の下位バージョンに対応するための1.1x系とIE9以上…