近年、急速にスマートフォンの普及が進む中、PC版とは異なるUI・UXで、スマートフォン用に制作されたWebサイトが増えています。 これまでは「PC」が主体で制作されていたWebサイトですが、若い世代では"PCを所有していない人"も多く、スマートフォンだけで携帯電話とPC、双方を兼ねて使っているという人も少なくありません。 そのため、スマートフォンサイト（以下、スマホサイト）のUI・UXに関しても、より使いやすさというのが求められる時代になってきていて、必要とされるポイントとしては、画面が小さいため、視認性や可読性の高さ、タップのしやすさなどになります。 そこでユーザをストレスなく、目的とするページに遷移させるためにも重要となってくるのがグローバルナビゲーション（グローバルメニュー）の役割です。 今回は、実例をもとに、様々なスマホサイトのグローバルメニューをご紹介します。 各グローバルメニュ

みなさんはChromeの拡張機能を活用していますか？　拡張機能を使えば面倒な作業でも効率良くこなすことができます。今回はWebデザインのときに使うと仕事が圧倒的に捗るChromeの拡張機能を紹介します。 1. FireShot ダウンロードURL：FireShot ページのキャプチャを撮影できる拡張機能です。ページ全体をキャプチャ、目に見える部分をキャプチャ、選択してキャプチャすることができます。ランディングページなど縦長のページのスクリーンショットを撮影するときに便利です。 2. PerfectPixel by WellDoneCode ダウンロードURL：PerfectPixel by WellDoneCode ページ内に任意の画像を重ねることができる拡張機能です。画像を動かしたり、透過させたり、サイズを変更したりしてレイアウトすることができます。ボタンやロゴの配置を迷っているときにコ

CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル

背景画像を表示させる際に、画像の見え方自体は固定しつつ、元の画像サイズ以上にブラウザを広げた時には、画像の縦横比率を固定したままボックスごと拡大して表示させたい、そんな時に使える方法を紹介します。 CSS .sample { -moz-box-sizing: border-box; box-sizing: border-box; background: url(images/tanuki.jpg) center center no-repeat; background-size: cover; width: 100%; height: 500px; padding-top: 62.5%; } 表示サンプル サンプルhtml 背景画像の縦横比率を維持したままコンテンツの幅に合わせて表示のサンプル 各プロパティの説明 サンプルでは、800×500pxの画像を背景画像としています。 プロパティで

こんにちは、メディア事業部のエリーです。 前回の記事では、「SEOに強いブログを作りたいなら、WordPressが超いいよ！」ということをお伝えしました。 今回は、実際にWordPressでブログを運営している人にとって大きな悩みの1つであろう「ブログが重い！」問題を解決したいと思います。 「なんだか最近、ページの表示が遅いなあ」と感じたことはありませんか？ わたしもそう感じてたんですが「死ぬわけじゃないし別にいいや」と思って放置してました。でも、それがいけなかったんです・・・。 ということで、WordPressに最適化された超高速サーバー「Z.com for WordPress」を展開する「Z.com byGMO」さんに、サイトの重さを改善するための方法と、それによって得られるメリットをお聞きしました。 目次 本当に「重い」のか確かめてみましょう スコアが60以下なら要注意！ ブログは早

デザイナーにとって、さまざまなプロジェクトや用途に合うフォントを持っておきたいところ。しかし無数にあるフリーフォントから、お好みの書体を見つけるのは、なかなか大変な作業です。 当サイトでこれまで紹介したフリーフォントより、目的やテーマ別に揃えたこの素材集を利用すれば、デザインの幅をグッと広げてくれるでしょう。紹介しているフォントの多くは、商用利用にも対応した素材となっているので、クリエイティブなアイデアを手軽に表現することができます。 当サイトでは、新しく公開されたフリーフォントを定期的に集め、紹介しています。こちらも参考にしてみてはいかがでしょう。 カテゴリ「フォント」を確認する

毎月新しく公開された高品質なフリーフォント素材をまとめてご紹介しています、今回は2017年2月度のまとめとなります。 デザインの雰囲気をガラリと変える日本語フリーフォントから、グラフィックデザインで重宝しそうなスタイリッシュな英文フリーフォント素材まで幅広く揃えています。いつも同じ書体ばかり利用してしまい、デザインの可能性を引き出したいときに活用し、お手持ちのフォントコレクションに追加してみてはいかがでしょう。 テーマ、目的別に探す！合計2000個のフリーフォント素材まとめ完全版 無料ダウンロードし放題！商用OKなフリーフォント50個まとめ 2017年1月度 デザインがグッと良くなる、持っておきたいフリーフォント素材まとめ Hype Free Font シンプルで使い勝手の良いサンセリフ書体のフリーフォント。 ※　個人、商用利用可能 Noway 文字の美しさと機能的な使いやすいさを実現した

ロゴデザインはユーザーに広く認知されるために、どんなプロジェクトやビジネスにも不可欠です。 しかし、いざロゴを作成してみると、デザイナーでも思い通りのデザインが、なかなかできないなんてことも。 そんなときは、ロゴテンプレートを利用してみましょう。 理由はずばり、プロデザイナーのようなロゴデザインを、無料で簡単に作成できるから。 オシャレやかわいい、かっこいい、シンプル、ボタニカルなど、豊富なテンプレートが揃っているので、文字を編集するだけでオリジナルロゴを作成でき便利です。 PhotoshopとIllustrator、両方で利用できるロゴテンプレートをぜひ活用してみましょう。 かっこいいロゴを作るポイントや、オンラインで利用できるロゴツールも参考にしてみると良いでしょう。 ■ おしゃれなロゴマークを作成する方法＋無料ツール12選 ワンランク上のプレミアム素材 プロジェクト予算に余裕があると

この度、スクウェア・エニックス社主催にて、オンラインで採用説明会を開催することになり、 参加エントリーをマイナビクリエイターから受け付けています。 今回はインフラエンジニアを積極採用しています。 会社概要および募集ポジションのご説明などを通して、詳しいお話を聞ける貴重な機会です。是非お早めにご応募ください。

おつかれさまです。デザイナーのみやです。 デザインをする際に、Photoshop以外にもお世話になっているツールが結構あります。フォントの選定だったり、コンテンツの幅を計算したり、地味な部分ですが、ここをツールに頼ると結構時短できます。 というわけで、今回はこれらの便利ツールをいくつかまとめでご紹介します。 1. wordmark.it http://wordmark.it/ PC内にインストールされているフォントを読み取って一覧で表示してくれるサービスです。 デバイスフォントを使用する箇所はあまり選択肢がないため、主にタイトルで使用する英語のフォントを探したり、文字組みを確認したりするのに使っています。 目についたものだけクリックしていき、あとでフィルタリングして比較するといった使い方もできて便利です。 2. web計。 http://zeller-lab.com/img-width/

企業の力で放課後に ソーシャルイノベーションを！ ソーシャルデザイン事業Social Design 詳しく見る 自治体の皆様へFor Government 詳しく見る ©Nagisa Kamiya 採用ページを見る ©Natsuki Yasuda 特設サイトを見る ©Natsuki Yasuda

専門的な予備知識はいらない。難しい言葉もわからなくていい。必要なのは知りたいという好奇心。 たくさんの宇宙の噂が、いずれも真実とは限らない。連日発表される宇宙や惑星のニュースを、科学者たち自身の言葉で解きほぐして伝えます。 科学者の解説で理を知る ※最新情報は、理の惑星 公式Facebookページをご覧ください！ 2016年12月01日惑星わくわく！ Advent Calendar 2016作成 2016年11月19日惑星科学ナイト（黄昏）vol.06　～ 惑星科学のすゝめ ～開催 2016年08月09日理の惑星5周年記念 オリジナルTシャツとオリジナルノートの受注販売開始 2016年07月29日プラネタリウムで話そう 〜子育てと宇宙はつながっている？！〜開催 2016年06月26日親子教室「アストロアドベンチャー ~地球外生命を発見せよ~」@はまぎんこども宇宙科学館 洋光台サイエンスクラ

「文字をキラキラさせて目立たせたい。」「天気が悪くて光の足りない写真をどうにかして欲しい。」「画像をスケッチ風に仕上げたい。」 ウェブサイトだけでなく日常何気なく目にする雑誌や広告など、「このデザインはどうやって作るんだろう。」とふと思うことはないでしょうか。あらゆるデザインの現場で利用されている Photoshop なら、そんなクリエイティブなアイデアを実現することができます。 今回は、Photoshopの基礎を覚えながら、新しいデザインテクニックを学ぶことができる Photoshopの新作チュートリアルをまとめてご紹介します。覚えておくことできっと役に立つ、、初心者にもオススメしたい実践的な作り方を中心に揃えています。 2016年総まとめ！デザイナーが確認しておきたいPhotoshopチュートリアル厳選55個 詳細は以下から。 やってみたかった表現をマスター！基礎力をつけるPhotos

可視範囲になってから表示されたり動いたり、スクロールに応じてアニメーションさせる方法を紹介します。動きをつけて目を引くことで、効果的に伝えることができるかもしれません。 以前、「jQueryを使って、スクロールしてコンテンツが現れたときにアニメーションさせてみる｜Webpark」という記事で同じようなものを紹介したのですが、デモが気に入っていない、アニメーションが1度きりということで作り変えました。 まずはサンプルをご覧ください。スクロールするとアイコンとテキストが順番にフェードインします。 このサンプルで使われている、画面いっぱいに表示する方法と、上にスクロールしたときに現れるメニューは以前紹介しています。気になる方はどうぞ。 画面サイズに合わせて高さを指定する3つの方法｜Webpark jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー｜Webpark とい

目次 6回に渡る短期連載記事です。他の記事もこちらでご紹介しておきます。 【CSS】floatを使わずtable-cellを使って横並びにする方法 【CSS】table-cellを使って関連記事の表示で良く使うリストスタイルのデザインを作る方法 【CSS】table-cellを使って要素を均等に配置する方法　←今回はこれ 【CSS】table-cellで中央にロゴ・両脇にボタンというデザインを作る方法 【CSS】table-cellでサムネイル画像＋テキスト＋ボタンのデザインをキレイに見せる方法 【CSS】table-cellを使って関連記事をタイル状にレイアウトする方法 番外編ですが、table-cellを使う上で重要なテクニックを追記します。 要素を均等に配置したい場合に使うと便利 まず、table-cellの基本的な書き方はこちらの記事をご覧ください。⇒【CSS】table-cell

プラグインで簡単導入！WordPressでメルマガを発行できるプラグイン5選 WordPressで【メールマガジン】を発行できるプラグインを5つ紹介する記事です。初心者を対象としているため、比較的簡単に導入できるものばかりです。プラグインを使うことで、登録のフォーム作成やメールの送信が簡単にできます。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査 メールマガジンを使ったマーケティング手法は今も有効な手段です。そんなメルマガをWordPre

WordPress5.0以上になるとGutenberg（グーテンベルグ）というブロックエディタが標準搭載されています。以前のクラシックエディタに慣れていた方からすると、UIと操作方法が大きく変更されていて、不便に感じる方も少なくないでしょう。弊社カスタマーサポートにもエディターの仕様に関する問い合わ... 固定ページに動的なページを記載する方法 静的な固定ページに動的なページをいれるためには下記の方法があります。 1. プラグインで固定ページ内にphpが使えるようにする 2. phpファイルを作成して固定ページ内にインクルードさせる 1.の方法には、「runPHP」などがありますが、誰でもPHPコードが書けるというのは、セキュリティのリスクが高くなります。加えて、1文字間違うだけで真っ白な画面（500エラー）になってしまうので、あまりおすすめできません。 今回は2.のphpファイルを作成し

こんにちは。 今日はPhotoshopを使って漫画などでよく使われる表現である「集中線」を作ってみたいと思います。 これを使うと、写真などで見せたい要素を強調して見せたり、勢いをつけたりする事ができます。 ファイルを新規作成 1000px × 1000pxで作成しましょう。 直線を引く こんな感じで下からラインを引きましょう。 今回は、1px、3px、5pxの三つの太さで描いてみました。 エフェクトをかける フィルタ　＞　ぼかし（移動） から、角度90°、距離は100pxで設定して…そのあと フィルタ　＞　極座標　＞　直交座標を極座標に これをかけると… どーーーーーーん！！！！ こんな感じで集中線が完成しました。 あとはこれを透過PNGで書きだして、写真に重ねればそれっぽくなります。 集中線、PNGで配布しちゃいます 少し太めの集中線（ダウンロード） 細めの集中線（ダウンロード） 両方合