バックエンドエンジニアのKazです。 昨今では、エンジニアにとってほぼ必須ツールとなった、ソースコードのバージョン管理ツール「Git」。今回はGitについて、ちょっと上級ですが、使いこなせばとても便利なコマンドを集めてみました。 なお、記事中のコマンドはすべて最新版のGitを想定しています。一部古いバージョンでは動作しないものも含まれていますので、バージョンの差異で非対応の場合はご容赦ください。 用例 任意指定オプションについて コマンド例の角カッコ （[]）で囲まれたオプションは任意指定となります。 git log [-p] ↑この角カッコ内は任意指定 プレースホルダについて コマンド例の山カッコ（<>）で囲まれた値はプレースホルダとなります。下記に沿って適宜置き換えてください。 <branch>: ブランチ名 <path>: ファイルのパス <pattern>: 検索したい文字列やパタ

LIGのWeb事業部について LIGのWeb事業部では主に企業様からご依頼いただき、サイト制作をするいわゆる「受託のWeb制作」をメインにさまざまなサイト制作に携わらせていただいております。 これまで制作したサイトはWeb事業部の実績サイト LIG WORKS に掲載されているので、ぜひこちらもご覧ください！ プロジェクト進行は原則チーム制です （※執筆時 2017年11月現在） LIGのWeb事業部では、約10チームとそれを束ねるマネージャー陣で構成されています。チームによって職業の配分や人数が若干異なりますが、職種混合で大体3〜7人程度です。 基本的にサイト制作はチーム単位で行い、リソース（人員）の空き状況などに応じて、他チームとも連携しながらプロジェクトを進行しています。チームにはそれぞれ「チームリーダー」が存在し、メンバーのリソース管理や売上の管理をチーム単位で行っています。 職種

こんにちは、ディレクターのむむです。 少し前の話ですが、2017 年 4 〜 9 月の 6 ヶ月間において、たくさんのクライアントよりご発注いただいたということで会社より受注賞をいただきました。 LIG メンバーはもちろんのこと、お問い合わせいただけるクライアントあっての受賞となりました。 ありがとうございました！ 作る Web サイトや予算はクライアントによってさまざまだとは思います。私の場合、コーポレートサイトを多く担当させていただき、本当にとてもありがたいことに総合金額は目標以上を達成できました。 今回改めて、Web ディレクター未経験の私がどのようなことに気をつけ、LIG で学び、そして成長していったのかをまとめたいと思います。 LIGにおけるWebディレクターの業務内容 LIG における Web ディレクターの業務はメール等にてお問い合わせいただいた内容を元に、お話をお伺いし見積

こんにちは、ディレクターのエリカです。 突然ですが、OGPの記述って意識していますか？ OGP（Open Graph protocol）とは、単刀直入に言うとSNSでシェアしたときに表示される情報のことです。 OGP記述を設定することで、SNSでシェアされたときの視認性が高まるので、設定は必須としたいところです。 過去に何度か設定変更があり、いつも「何が最新なの？」と迷ってしまうので、2016年最新版をまとめてみました。 OGPの記述設定 HTMLの内に下記を記載します。 //共通項目 <meta property="og:title" content="ページのタイトル" /> <meta property="og:type" content="ページのタイプ" /> <meta property="og:url" content="ページのURL" /> <meta property=

こんにちは、まろCです。 前回に引き続き、アニメーションの参考になりそうな良いサイトを見つけましたので、ご紹介したいと思います。 Kygo Life – Music Meets Fashion URL: https://kygolife.com/ 今激アツのDJ Kygoのファッションラインのサイトです。 メニューや、ローディング、遷移、細かいところのギミックまで気持ちよく動きます！ なによりカッコいいデザイン。。。 （ソース圧縮＆クラス名がランダム数値で解読が難しい。。） Converse “Diamonds” URL: http://counterclimate.converse.com/ 出ましたね。タイトルの文字、書くようにアニメーションさせてるのはwebglですね。もはや流行りですね。 どうやったらできるんでしょうか？？　研究したいです。 はみ出しプロジェクト｜新しい学校のリーダ

「SublimeText 3」をDreamweaver感覚で使えるようカスタマイズ！便利なプラグイン12選まとめ こんにちは！　デザイナーのすーちゃんです。 変温動物ぎみなので冬は常時手が冷たく、コンビニのお釣りを受け取るのにとても気を遣います。あの、ちょっと上から落としていただいて構いませんので……。 さて、わたしは普段Dreamweaverでコーディングをしているのですが、ちょっとした修正などには「Sublime Text 3」を使っています。ただ、たまにしか使わないので、Dreamweaver感覚で使おうとすると凄まじいストレスが……！ そこで今回はしっかり腰を据えて、Sublime Text 3をDreamweaver感覚で使えるようにプラグインでカスタマイズしてみましたので、その方法をご紹介したいと思います！ わたしがSublime Text 3を使う4つの理由 まず、なぜDre

エンジニアのふとしです。 ネットをしていて、以下のような文言に遭遇することはないでしょうか。 404.　that’s an error. この状態を見た親から「インターネットが壊れた！」と連絡がきたことがあるので、簡単に説明しようと思います。 普段インターネットをする際には意識しないかもしれませんが、この数字はそれぞれに意味が存在する「HTTPステータスコード」と呼ばれるものです。 ウェブサーバとブラウザの仕組み インターネット経由で情報を得る場合、ブラウザ（IEとかChromeとか）がサーバからページを取得しているというのは、みなさんなんとなく知っているかと思います。 サーバはリクエストに対しHTML形式でデータを返す みなさんのブラウザからサーバに「このページが見たいよ」というリクエストが送られると、サーバはHTML形式でデータを返します。 HTML形式はブラウザが解析できるファイル形

こんにちは、tetsuです。 今回はMacの「OS X Server」の機能「VPN」を使って、社外から会社のネットワークにVPN接続するための設定を紹介します。 前提 VPN接続をするためには、ルーターの設定を変更する必要があります。 設定が必要な箇所は下記の通り。 VPNに必要なポートの解放 NATの設定 セキュリティ上、機材などの詳細情報は記載できませんが、大まかに以下の設定となります。 VPNに必要なポートの解放 ルーターのインターネット接続を設定しているインターフェイスのフィルタ設定にて、次のポートを解放します。 TCP1723番のポートを外部からVPNサーバIPアドレスへポートを解放 UDP500番のポートを外部からVPNサーバIPアドレスへポートを解放 UDP1701番のポートを外部からVPNサーバIPアドレスへポートを解放 UDP4500番のポートを外部からVPNサーバIP

こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 昨今ではWebのフロント周りを取り巻く環境が激変しています。 Webサイト・アプリケーションが進化するに連れて構築も難しくなってきましたし、技術やツールもいろんなものが登場しました。 そこで今回は、フロントエンドエンジニアはもちろん、コーディングに携わる人なら誰でもおさえておきたい、今旬な技術やツールを紹介したいと思います。 コーディングに関わる人ならおさえておきたい必須のフロント技術＆ツール8選 1. タスクランナー フロントコーディングに関わるあらゆるタスクを自動化してくれる頼もしいツールです。Grunt,Gulpといったツールがコレにあたります。 JadeやSass,CoffeeScriptのコンパイル、画像圧縮、バリデーションチェック、webfontのアイコン化、スプライト画像生成、スタイル

こんにちは！　ディレクターの まさしです。 ディレクターは、お客様の悩みや課題を解決へ導く、とても素敵な仕事ですよね！ お客様の課題が解決され、喜びが共有できたときが、ディレクターにとって一番嬉しい瞬間でしょう。（制作物が公開されたときよりも） さて、お客様の課題解決をしたい場合は、まずはヒアリングから始めますよね。 今日は、このヒアリングという部分において、一番重要だなと思っていることをお話しできればと思います。 何が一番重要かは、人によって違うかと思いますが、僕にとって一番だなと思う点をご紹介させていただきます。 ディレクターの皆さんと、その先にいるクライアントさんに少しでも良い気づきがあれば幸いです。 お客様が本当に依頼したいこと 僕がヒアリング時に一番重要だなと思っていることは、ビジネスモデルです。 まずWebサイトを作る際に、主に考えないといけない目線としては以下の2つがあげられ

こんにちは、王です。デザイナーやってます。 今回は「Flexboxを基本から理解して、使い方をマスターしよう！」ということで、初耳の方でもざっとFlexboxで何ができるか分かるように短い動画を用意しました。 動画の中で使ってたデモをアップしたので、確認してみたい方は以下のリンクをどうぞ！ デモ 昨今では、当然ながらデジタルデバイスサイズの多様化でレスポンシブデザインとやらが流行っています。 同じサイトをさまざまなスクリーンサイズに応じたデザインをしなければならない上に、コーディングにも手間がかかります。制作側からしたら何かと厄介ですよね。 「なるべく手間をかけずに作りたい！」という世界中のデザイナーの声に応えて、「Twitter Bootstrap」をはじめとした数多くのフレームワークが徐々に脚光を浴びはじめて久しくなります。 ただ、これらはあくまで古い技術の組み合わせで、革新的な技術で

はじめまして。4月1日からLIGで働いてます、ハカセです。今後フロントエンドの開発に関する情報を発信していきますので、よろしくお願いします。 さて、フロントエンド開発でのブラウザチェックって結構大変ですよね。こういう作業は重要なのですが、飽きやすいので、効率よく進めていきたいところです。 LIGでもブラウザチェックなどのデバッグの方法については定期的に議論がなされる永遠のテーマです。 そこで今回は、チェックやデバッグを助けてくれるツールから、Win/Mac共通で使えるものを厳選してご紹介します。 1. Edge Inspect http://html.adobe.com/edge/inspect/ Adobe社が提供しているアプリケーションで、Creative Cloudに入っています。 PCのブラウザとモバイル端末で同時にリアルタイムの確認ができたり、スクリーンショットを取ったりすること

1月が終わってしまった・・・・・ どうも正月が恋しい段田です。 今回はWordPressサイトを構築している時に役に立つプラグインを紹介したいと思います。タイプ別で分けて紹介します。 目次 デバッグ系プラグイン 記事操作系プラグイン パーマリンク系プラグイン データ移行・操作系プラグイン その他 デバッグ系プラグイン WordPress構築時にWordPress内の情報を確認したい場合に利用すると便利なプラグインです。 Debug Bar 開発時のデバッグで利用するとても有名なプラグインです。パラメータ情報やエラー情報を確認できたりします。 また、このプラグインの拡張用プラグインもいくつかあるので、多機能です。 必須プラグインと言っていいでしょう。 Debug Bar Debug-Bar-Extender 先ほど紹介したDebug Barを拡張するプラグインになります。利用するときはDeb

成果が出るサイトリニューアルの実績多数！ 年間150サイトを制作・リニューアルし、毎年複数のWebデザインアワードを受賞。 成果にしっかり向き合い、一目見た瞬間に貴社の魅力がグッ！と伝わる、そんなWebサイトにリニューアルいたします。お気軽にご相談ください！ 💡株式会社LIGのWeb制作実績・お問い合わせはこちらから こんにちは。2007年創業のWeb制作会社、株式会社LIGのデザイン部　部長の吉田です。 これからWebサイトのリニューアルを検討しているけど、どうやって進めればよいのかわからない……という方に向けて、Webサイトのリニューアルの手順を9ステップで解説します。加えてWebサイトリニューアルの基礎知識や、参考事例もご紹介していきます。 Webサイトリニューアルの進め方9ステップ Webサイトリニューアルの具体的な手順をご紹介していきます。 ①リニューアルする目的を考える ②現

こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 先日、HTML5カルタ大会という大会で優勝させていただきました。 いやあ、実に光栄です。 そこで今回は、HTML5ネタ繋がりで、“間違えて使ってしまいがちなんじゃないかと思うややこしいHTML5タグ”をまとめてみました。 あ、でも皆さん誤解しないでくださいね。 この記事は大会前にカルタの準備がてら執筆したものなので、決して「このキング・オブ・HTML5こと俺様がレクチャーしてやんよ！」なんてことは1mmも考えておりません。 どうか、一Web制作会社の端くれエンジニアが戯言ほざいてやがるな、まあ暇だし読んでやるかくらいのノリでお付き合いくだされば幸いです。ありがとうございます。 【こちらもおすすめ】 その使い方合っていますか？間違えやすいタグ15選（HTML5対応） “定義”に関わるタグ　<dt>,<df

こんにちは～　仕事が恋人のデザイナー、王です φ(≖ω≖｡)♪。 最近海外でもてはやされまくりのテキストエディタ「Sublime Text」と恋に落ちたことをこの場で告白したい！ やっと出会えたぞ！僕が探し求めていた幻のエディタに！！ 昨今話題沸騰中の「Sublime Text」エディタについて、ご紹介しましょう！本記事を読んで、ぜひとも他のエディタからSublime Textに乗り換えていただきたいです！ 見た目的には、このように、優雅（Sublime）そのもの！ Mac、Windows、Linux　三大プラットフォームで動くのも嬉しいですな！ 公式サイトは下記リンクです。 https://www.sublimetext.com/ それでは、動画やキャプチャーを使ってSublime Textの素晴らしい魅力を伝えていきたいと思います。 Sublime Textのチャームポイント 特色機能

こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません！ はじめに結論を言うと、CompassでCSSを書くと 早い！ 見やすい！ メンテしやすい！ コード量がぐっと減る！ 一度使い出したら最後、もう元には戻れない！ 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！ 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh