段田です。 WordPress案件で「投稿画面カテゴリーで親カテゴリーのチェックボックスを非表示にして欲しい」と要望があり対応しました。 なので今回は投稿画面のカテゴリーカスタマイズについて書きたいと思います。 ■実行プログラムについて カテゴリータブの表示制御は /wp-admin/includes/template.phpの wp_terms_checklistメソッドを使っています。 function wp_terms_checklist($post_id = 0, $args = array()) { $defaults = array( 'descendants_and_self' => 0, 'selected_cats' => false, 'popular_cats' => false, 'walker' => null, 'taxonomy' => 'category',

こんにちは、最近あだ名が増えるばかりのおじいちゃんと申します。 今回はブラウザ対応で便利な「modernizr.js」を紹介します。 modernizr.jsとは modernizr.jsはJavaScriptのライブラリです。 閲覧者のブラウザがどのような機能をサポートしているかをチェックして、HTMLタグにサポート状況を判別できるクラスを付与し、その結果を記録したmodernizrグローバルオブジェクトを生成してくれます。 それらを利用して、ブラウザごとの処理を記載することが可能となります。ということで、さっそく使ってみましょう。 ダウンロード 下記よりダウンロードが可能です。 Modernizr http://modernizr.com/ modernizr.jsをダウンロードしようとするとチェックボックスが並んでいるページが表示されます。これらの項目はmodernizr.jsを使用

Googleの提供するPageSpeed Insightsを参考にして、Webサイトを高速化したときにやったこと こんにちは、ライターのモリイです。 Googleが提供しているPageSpeed Insightsというサービスがあります。これは、ウェブページのコンテンツを解析してページの読み込み速度を測定し、速度の改善策を提案してくれるサービスです。 たかがページの読み込み時間、と侮ることはできません。 読み込み時間が短くなることで、 Googleに評価される。 ユーザーにストレスをあたえない。 というメリットがあり、Google検索での順位をあげるためや、ユーザに離脱されないためにも重要な要素となります。今回は、このツールを使ってサイトの読み込みスピードを実際に上げてみようと思います。 ページの読み込みスピードを分析してみる 画面中央のフォームにサイトのURLを入力し、「分析」をクリック

こんにちは、CTOのづやです。 今日はアニメーションさせるときに便利なTweenMaxの使い方について書きたいと思います。 こちらのスピードテストのページを見るとわかるように、かなりハイパフォーマンスなアニメーションが可能です。 というわけで、基本的な使い方を書いていきたいと思います。 とりあえず要素を動かしてみよう まずは公式ページからダウンロードしましょう。 慣れないうちはTweenMax.jsを、とりあえず以下のように読み込んでおきましょう。 <script src="js/TweenMax.min.js"></script> 基本的によく使うクラスとして、以下の4つがあります。 TweenLite TweenMax TimelineLite TimelineMax Tween系とTImelite系の2種類がありまして、それぞれMaxが高機能版だと考えてよいかと思います。 単純に要素

日本のみなさん、こんにちはぁ！　2年カナダに住みましたが、最近日本に帰ることになったライター、のび太です。日本に帰ったらまずはソッコーで吉野家の牛丼を食いに行きたいと思いまーす！！ さて、WordPressでサイトを作る時にイチから作るのって結構大変ですよね？　とはいえテーマを使ってしまうと、いらない機能、余計なコードなどが入っていてカスタマイズにとても苦労します。 そんな時に便利なのがBlank WordPress Themesです。 Blank WordPress Themesとは？ カスタマイズを前提としたディベロッパー用のWordpressテーマです。Starter WordPress themesとも呼ばれています。ファイルには最低限必要なWordPress PHP、CSS、HTMLのみで、WordPressのベースだけがほしい、時間短縮したい時にはもってこいのテーマです。 今回

【サンプルPSDデータ配布中！】デザイナーとフロントエンドにちょっと優しい「PSDルール」を考えてみた こんにちは、デザイナーのもりたです。 突然ですが皆さん、整理整頓は得意ですか？　私の会社のPCのデスクトップはスクリーンショットだらけです。 よく整理整頓の第一歩はルールづくりだと言いますね。 リモコンはサイドテーブルに置く、雑誌はラックに入れる、シャツ類は一番上の引き出しに入れる……。でも、整理整頓ができる人にはきっとわからないけれど、自分に合わせたルールをつくるのが一番めんどくさいんですよ！ だからデザイナーの間でもPSD（Photoshop Document）のレイヤー整理がまちまちだったり、同じ人でさえ場合によって変わったりします。そこで、いちいち考えることすらめんどくさくなったので、社内共通のルールをつくってしまおうということになりました。 せっかくつくったので、今回はそれをご

はじめまして！　最近フロントエンドエンジニアとしてLIGにジョインした大学生のれもんです。 まだまだ新米エンジニアとして奮闘する毎日、どういった姿勢で学ぶべきなのか、エンジニアとしてどうあるべきなのか日々悩んでいます。悩んでいるのであれば、いっそのことLIGにいるエンジニアに聞いてしまおう！　ということで、今回はLIGにいる5人のエンジニアの方にいろいろ質問してみました！ インタビューに答えてくれた5人のエンジニアの皆さん 今回インタビューを快く引き受けてくださったLIGのエンジニアの方々をご紹介したいと思います！　5人とも全く違うバックグラウンドを持っています。 人物紹介：先生 CTO（最高技術責任者）。前職では、ソーシャルゲーム会社でUI/UX開発本部の本部長。JAVAやiOS、バックエンドもできるフルスタックのフロントエンドエンジニア。優しい顔をしているけど、言うときは言うLIGの先

こんにちは、CTOのづやです。 サイトを作っていると「スクロールに応じて何かをさせたい」なんてことをよく思ったりするのではないでしょうか。 0から書いてもいいのですが、簡単にできたら、というときのためのプラグイン「ScrollMagic」を試してみました。 こんな例のような動きがつけられちゃうらしいので、早速紹介していきます。 使うための準備 まずはこちらのGitHubから。 ScrollMagicはjQuery PluginなのでjQueryが必須なのはもちろん、TweenMaxといったライブラリも必要になります。 読み込むときには当然それらも必要になりますので、↓のような感じで準備しましょう。 <script src="js/TweenMax.min.js"></script> <script src="js/jquery.min.js"></script> <script src="

こんにちは段田です。 最近、タスクツールの「Trello」を使い始めました。 このツール、付箋を使うような管理方法で直感的に使いやすく、かなり良いタスクツールです。 ※あくまで個人の感想です。 また、TrelloはChromeブラウザの拡張機能で機能を追加することができ、タスク管理の手助けになります。 そこで、今回はTrelloを使うときにおすすめしたいChromeブラウザの拡張機能を紹介したいと思います。 Trelloとは？ 簡単にTrelloの説明をします。 https://trello.com/ Trelloは、海外製の無料タスク管理ツールです。 個人はもちろんチームでの利用も可能で、タスクを複数人で共有することもできます。弊社でも一部チームではTrelloでタスク管理してたりします。 PCはWebブラウザから利用でき、スマホの場合でもiPhoneとAndroidでそれぞれアプリが用

こんにちは、しょごです。 ふと振り返ってみると、バックエンドエンジニア業を始めてもうすぐ10年が経とうとしています。 思えば高校時代にバンド活動にハマり、大学でネットゲームに現を抜かしていて。こいつぁやばいと思い、1.5年多く行ってしまった大学を卒業後、急いでハローワークに走った日々を思い出すと、なんでちゃんとやっておかなかったんだろう、とうなだれてしまいます。 そんな中、どんな風に開発してるの？と聞かれたことがありましたので、今回は新人エンジニアに向けてエンジニアとしての成長するためのメソッドをまとめてみました。 1. 開発は設計を実装以上にしっかり行う めっちゃ基本中の基本です。 最初に、完成させたい最終目標に向けて、開発に必要な機能・仕様をまとめます。時にはそれらの設計図として、基本仕様書、詳細設計書、画面設計書、DB設計書などをまとめたり、作成環境によってはサーバ設計書、ドメイン設

Bootstrapも標準化したDreamweaver CC 2015を使って、レスポンシブデザインを爆速で作る方法 こんにちは、デザイナーのぺちこです。 AdobeのCC2015がリリースされて2ヶ月ほど経ちましたね！ 恥ずかしながらPhotoshop以外はまだ2015を導入していなかったため、先日どーんとアップデートに挑みました。 とはいっても、どんなアップデートがあったのか分からないままでは宝の持ち腐れ。新機能を色々と調べていたところ、いつの間にかDreamweaverがとても便利になっているらしいということを知りました。 どうやらDreamweaver CC2015では、 レスポンシブサイトのコーディングに便利なビジュアルメディアクエリーバーやリサイズバーの追加 Bootstrapのサポート Emmetの標準サポート 手軽にブラウザや実機で確認ができるデバイスプレビュー機能の追加 な

LIGブログ読者のみなさん、はじめまして、塩谷舞と申します。しおたん、と呼ばれています。日頃は恵比寿にある文化系の制作会社でせっせと職務に勤しんでおります！ 最近、自社サイトのリニューアルを担当したのですが、そこで最も力を入れたのが「スタッフページ」の魅せ方です。「インターネットに社員の個人情報を掲載するなんて、とんでもない！」という時代もありましたが、最近は日本でも様々な企業のサイト上にて、スタッフ紹介ページを見かけるようになりました。 ということで、ユニークな手法でスタッフ紹介をしている企業サイトをまとめてみたので、紹介させていただきます！ W+K Tokyo https://wktokyo.jp/people/ ※現在は閉鎖されています。 1980年代のアイドルを彷彿とさせる男女。シブがき隊でも、プリンセス・プリンセスでもありません。ポートランドに本社を持ち、世界的にそのクリエイティ

こんにちは、Web制作会社「株式会社LIG」の代表取締役会長、ゴウです。 今回、LIGで働くWebデザイナーとディレクターにアンケートを取り、制作する際に普段参考にしているかっこいいサイトや、おしゃれなギャラリーサイトを集めてみました。 毎日仕事で使っている彼らのチョイスなので、かなり実践的で参考になる、かっこいい・おしゃれなサイトが集まったと思います。 全部で27個も集まったので、ジャンル別に分類もしました。それではいってみましょう！ デザインの引き出しを増やすには？ デザインの引き出しを増やすには、インプットのほかに、自分のアウトプットに対して誰かからフィードバックをもらうという方法もあります。周りに相談できる人がいなければ「スクールでの勉強」もおすすめです。 💡現役のプロからデザインを学べる「デジタルハリウッドSTUDIO ｂｙ LIG」の詳細はこちらから ※このページは、2021

最近は少しずつCTO業務に取りかかれるようになってきました。やっぱり夏は忙しくなりそうです。こんにちは、先生です。 以前「エンジニアがいい感じにフロントエンド開発を爆速化できる環境構築の手順」という記事でフロントエンドの開発環境を作ったものを紹介しましたが、やはり変化の流れが激しく、この環境も少しずつ変化していきました。 今日は新しくなった環境をご紹介します。このまま使ってもいいですし、一部を取り入れてもいいと思います。 おさらい「爆速化できる環境」とは？ フロントエンド開発（コーディング）を早く終えるための環境で、以下のような機能を持ったテンプレートです。 外部テンプレート（EJS） SASS HTMLバリデーション ユニットテスト スプライト画像&SCSS生成 スタイルガイド生成 JS/CSSの圧縮 ES5で書ける（ES5非対応ブラウザへの自動対応） LiveReload（ファイルを更

こんにちわ！ひろゆきです。 WEBページを改善したい！となった時にデザイン見なおしたり導線確認したりいろいろやると思いますが、中でもABテストは「AとBの比較」という単純明快な手法でありながら信頼出来るテストだと思います。今回はそのようなWEBページを改善するときに行いたい「ABテスト」をGoogle Analyticsで簡単に行う方法をご紹介します。 また、以前同じような機能のgoogleウェブサイトオプティマイザー（googleウェブサイトオプティマイザーの使い方）をご紹介したのですが、こいつがanalyticsに統合されたみたいです。 ABテストとは ABテストとはページを2パターン用意して、「どちらが優れているか」を導き出す手法です。2つのページを用意してどちらがコンバージョンが多いかを測るだけなので、シンプルで信頼出来るテスト結果を得ることが出来ます。そんなABテストですが、Go

こんにちは、アートディレクターの長岡です。 Webサイトを運用している方なら、日々のPDCAを回す際に分析だけでなくABテストを行なうことも多いのではないでしょうか。 ABテストも一般化し、さまざまな事例がWebサイトにて紹介されるようになってきたので、当たり前になりつつあります。現在、ABテストツールと言えば「Kaizen platform」や「Optimizely」がとても有名ですが、その他にもいろいろと良いツールが世に出てきています。 今回は、その中で実際にLIGブログで利用させていただいた「Visual Website Optimizer」（ビジュアル・ウェブサイト・オプティマイザー）をご紹介したいと思います。 目次 まずはじめに、Webサイトのテストとは テストを行なうことでわかること Visual Website Optimizer（VWO）とは VWOの特徴 VWOのABテス

こんにちは、デザイナーの花ちゃんです！ Webサイトのデザインをしていると、アイコンを取り入れる場面がよくあると思います。アイコンには文字だけではわかりにくい情報を、ユーザーに対して直感的に素早く伝える効果があります。また、モチーフを簡略化しているので、限られたスペースでもしっかりその機能を果たしてくれます。 今回は、Webサイトはもちろん、図版や資料作成にも欠かせない、無料で使えるアイコン素材サイトをテイスト別にまとめてみました！ 独学でつまずいていませんか？ Illustratorの使い方を効率的に学びたい、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGでもWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。「今すぐスクールの概要を知りたい！」という方は、ぜひこちらより資料をご請求ください。 ※この記事は2

こんにちは、ライターの内藤です！ 前回の記事（美しいWebデザインをタイプ別に！見ないと損する目的別厳選Web見本サイトのまとめ）ではWebデザインのタイプ別にわけた見本サイトのまとめを行いました。 今回はその続編として、スマホ・タブレット最適化サイトのデザインまとめをご紹介致します。 目次 ※もちろん順番に読む必要はありません。 スマホ専門デザイン見本 部品別に見られるサイト その他スマホサイトの部品作りの参考になるサイト スマホサイト素材になるキット フリック用JavaScriptプラグイン スマホ対応の無料WordPressのテーマ スマホサイト制作参考 スマホ専門デザイン見本 iPhoneサイトデザイン集のiPhoneデザインアーカイブ http://iphonedesignarchive.jp/ 登録数が半端ないです。 カテゴライズは業種別のみですが、年月アーカイブがあるので、い

こんにちは、ライターのYUKIです。 私が書いた前回の記事、“Amazon”から学ぶ、4つの観点から考察するUXデザインで、簡単にお話したウェブアクセシビリティについて、 今回は更に詳しくご説明したいと思います。また、世界の大企業では、このトピックをどのように考え、取り組んでいるかを知りたい方は、以下のリンクにあるサイトを参照して頂ければと思います。 Appleのアクセシビリティへの取り組み Samsung Electronics のアクセシビリティに関する考え方 ウェブアクセシビリティとは何か ウェブアクセシビリティとは、「年齢や身体的条件に関わらず、全ての人がウェブで提供されている情報にアクセスし、利用できること」ならびにその度合いを意味します。

ここで言う、「年齢や身体的条件」は以下のようなものが含まれます。 全盲 弱視 色覚障害 聴覚障害 肢体不自由 知的障害 高齢者 どうして重

初めまして。アメリカからやってきたUIデザイナーのCorey（コーリー）です。 LIGの転職サービス「Poole」でUIデザインをしています。 PhotoshopやIllustratorをメインとして使うデザイナーは多くいると思いますが、私はPhotoshopをほとんど使いません。1年前にSketchへ乗り換えたからです。 現在、日本のデザイン界ではSketchはそれほど使われてないかもしれませんが、海外ではSketchが大ブームになっています。 今回は私が最強なPhotoshopからSketchへ乗り換えた理由をお伝えします。 Sketchへ乗り換えた理由（Why I Use Sketch） http://bohemiancoding.com/sketch/ 1. UI Design中心 Sketchは完全にWebとモバイルUIデザインの専用ツールなので、それ以外の余計な機能が入っていま