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

こんにちは、デザイナーのサリーです。 今回は「タイムライン」のサンプルを10例ほど紹介していきます。 たとえばLIGの沿革ページもSNSのタイムラインっぽいデザインになっているように、沿革や実績をタイムラインで見せたいという要望はときどきあるので、デザインの際の参考になればと思います。 それでは、はじめます。 さまざまなタイムライン10例 1. Vertical Timeline http://codyhouse.co/gem/vertical-timeline/ レスポンシブ対応のタイムライン。 JSも使用していて、スクロールでコンテンツが“びよよん”と気持ちいい動きで出現します。 中央のカテゴリーのアイコンがアクセントになっていて、かわいいですね。 2. VERTICAL TIMELINE http://tympanus.net/codrops/2013/05/02/vertical-

Board member 代表取締役社長CEO / 大山 智弘 取締役COO兼CTO / 高遠 和也 取締役 / 岩田 憲昭

年間150サイトリリース＆ 毎年複数のデザインアワード受賞 2007年の創業以来、大企業から個人商店まで様々なWebサイト制作を手がけてきました。訪問した瞬間に貴社の魅力がグッと伝わるWebサイトを作ります。圧倒的に豊富な実績と経験を基に、貴社のビジネス課題をWeb制作で解決します。

こんにちは、tetsuです。 エンジニアでデザインもできる方はいますが、できない方もいるのが現状です。僕自身もできないほうに入るかと……。 ただ、システムを構築する際に、ほぼ作成しなければならないのが管理画面でしょう。デザインができないにも関わらず、管理画面のデザインを考えなければいけない。そんなときには大変ありがたい、Bootstrap3対応の管理画面のデザインテンプレートを提供してくれる方々がいます。 今回はその中から特におすすめのテンプレートを5つ、ご紹介いたします。 ライセンスについて 今回は、以下のライセンスが表記されているものを中心にピックアップしました。 ▼ MIT license 1. このソフトウェアを誰でも無償で無制限に扱って良い。ただし、著作権表示および本許諾表示をソフトウェアのすべての複製または重要な部分に記載しなければならない。 2. 作者または著作権者は、ソフト

こんにちは、Webデザイナーのもりたです。 これからWebデザイナーを目指す人、またWebデザインへの興味を深めたい人向けにお届けしています、LIGデザイナー陣による連載「Webデザインをはじめよう」。第1弾となる前回は、「デザイナーの仕事は問題解決をすること」とご説明しました。 今回は「じゃあwebデザイナーが問題を解決するために、Web制作の中でどんな仕事をするの？」「Webデザイナーの仕事は具体的に何をするの？」という疑問にお答えしていきます。 Web制作のご依頼はこちらから Web制作の依頼をご検討の方はこちらへ 関わるひとたち Webデザイナーの仕事についてお話する前に、デザイナーの他にどんな人がWeb制作に関わっているのか見てみましょう。 Web制作には、ざっくり分けると4つの職種の人間が携わります。 Web制作に関わる職種 Webディレクター Webデザイナー フロントエンド

こんにちは。野田です。 先日ロンドンに行ってきて、流行のロンドンヘアーにしようとしたのですが、娘の芋掘り行事に合わせてお父さんヘアにしてしまいました。 大後悔です。 さて、Webサイトまとめをたまーにフラッとやってみようと思っていたので、今回「2014年9月 Webサイトまとめ」として書かせていただきます。 この突然の衝動を抑えなくていいのがLIGのいいとこです。僕の中で、“こんなのあったなー”と記憶に残っているWebサイトをご紹介させていただきます。どうぞご覧ください。 1. Extremely Piaget http://www.piaget.com/high-jewelry/extremely-piaget トンマナが洗練されていて、上品でエレガントなデザイン、演出、表現方法、全て美しいWebサイトです。 84parisさんの作品です。 #優雅　#フォト　#アートディレクション 2.

こんにちは。 アートディレクターの野田です。 そろそろこのまとめが定着してきたんじゃないかなと思います。 過去のまとめが見たいという方は、ライブラリからご覧ください。 今回も気になったWebサイトを紹介させていただきます。 どうぞご覧ください。 1. BIG HIRO 6 http://movies.disney.com/big-hero-6/ ここ1〜2年、ディズニーのWebクオリティがやばいです。 映画のクオリティを感じさせるWebサイトです。 gifとvideoタグの使い方がとても上手です。 #cg　#gif　#loading 2. Give Holland a Break http://givehollandabreak.d.shcc.nl/ ずっとメディアにさらされたGordon Hollandさんに休暇を。 簡単に言うと、最も話題になったGordon Hollandさんをキット

こんにちは！　ディレクターのともぞうです。 最近はカーソル移動がEmacsに汚染されはじめていて、Emacsも悪くないな…と思ったりしています。 さて、みなさん！ サイトの運用・改善していますか？ 僕はは運用案件にアサインされたことがきっかけで、数値を見たり改善案を出してテストをしていました。 より精度の高い解析・提案をおこなえるようになりたいと思い、今回の「LIG’s DIRECTION school 2016 with 日本ディレクション協会」に参加してきました！ 目指せ！　KAIZENおじさん！ 「LIG’s DIRECTION school 2016 with 日本ディレクション協会」とは？ ディレクションってなに？ 具体的にはどんなことをするの？ どんなスキルが必要になるの？ などなど、体系的に学びにくく、独自で現場でしか学ぶことができなかった「ディレクション」を学ばせてくれるス

こんにちは、ディレクターの阿羅漢（あらか：本名）です。 ディレクターによる連載「いいWebつくろう〜クライアントと制作会社〜」第5回のテーマは、Webサイト制作におけるコンセプトの大切さです。 今回は、コンセプトをつくる上での手法というよりは、なぜLIGではコンセプトを決める工程を取り入れていて、大切にしているのかということをお話できたらと思います。 また、実例は出せないので、コーポレートサイトをつくる体でお話します。 主観的な部分もあるかと思いますが、もし宜しければお付き合いくださいませ。 なぜ、コンセプトが必要なんだろう？ アイデアをつくる上での軸を決める LIGでは、Webサイトづくりのはじめの工程として、コンセプトの設定をおこないます。これは、デザイナー、エンジニア、クライアント、そして、ディレクターと、このWebサイトづくりに関わる複数の人たちが、何を頼りにクリエイティブをつくっ

コーポレートサイトとは、自社の紹介を目的としたWebサイトのことをいいます。 営業や広報に代わって自社の紹介をしてくれる重要な役割を担っていますが、目的が曖昧なまま制作してもその効果を十分に得ることはできません……。はより高い効果を得るためにはどのような工夫が必要なのでしょうか？ 今回はコーポレートサイトとはどんなものなのか、その役割や目的、さらにはコーポレートサイトを作成する上で必ず知っておくべきポイントを紹介します！ 株式会社LIGって？ 2007年設立、東京都台東区発のWeb制作会社。年間150のWeb制作・サイトリニューアル実績をもち、毎年複数のWebデザインアワードを受賞している。月間200万PVのWebメディア「LIGブログ」で培ったマーケティングのノウハウを生かした企画力、複数の海外拠点を生かしたシステム開発力も強み。 👉Web制作の詳細・実績 ※編集部注：2024年1月に

無料で便利なワイヤーフレームツール4選 POP https://marvelapp.com/pop/ スマートフォンから手書きのワイヤーフレームを撮影して、ページとページを紐付けることができるアプリです。 こちらの動画を見ていただく方が、言葉でご説明するより早そうです。 スマートフォンサイトのワイヤーフレームはどうしても縦長になりがちな印象がありますが、このように実際のスマートフォンから確認ができれば、そこまで気にならなくなるかもしれません。プレゼンテーションにもオススメです。 Justinmind Prototyper http://www.justinmind.com こちらはインストールして使用するツールです。 インストールすると、最初にデバイスを選択する画面がポップアップで表示されます。 次に作成するサイズを選択します。 するとこのような画面になります。 あとは必要な要素を左からド

こんにちは、エンジニアののびすけです。先日はAWSユーザーに向けて「AzureでもAWSと同じようなことができるよ！」という記事を書きました。 今日は、そんなAzureの人気サービスのひとつ「WebApps」を紹介します。 Web Appsとは https://azure.microsoft.com/ja-jp/services/app-service/web/ 「Web Apps」とはAzureが提供するPaaSです。昔はAzure Websitesと呼ばれていました。 Web Appsではインフラ側の設定を自分でやらなくても、サーバーサイドプログラムを動作させることができます。デプロイや自動スケールの設定などもできるため、Web制作で必要になる機能の大半をカバーできます。 一説によると 世の中のWebサイトの8割はPaaSで運用可能だという話もあります。イメージしやすいサービスでいうと

おかげさまで2周年！去年に続き2月11日（木・祝）は「The Sauna」アニバーサリーグッズをプレゼント！

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

Address 2-20-11 Kojima, Taito-ku, Tokyo-to 111-0056 Japan Google maps

こんにちは。LIGの代表、岩上です。 僕達は2012年1月からブログを本格的に書き始めて、自社サイトをメディア化するという事に力を注いできました。おかげさまで1年ちょっと運営して月間140万PVくらいの規模のサイトになってきたので、そろそろこれまで僕達がやってきた事の狙い、施策、効果などをまとめたいと思い、記事を書いてみました。 結論から言うと、「自社メディアを持つ」という事はマーケティングやブランディングの観点からとても効果的なのですが、大変な面も多々ありますので、我々の実体験を元にした本記事をお読みいただき、何かの参考になればいいなと思っています。 それではどうぞ。 ※読了目安、10分くらいです。 目次 LIGブログの規模と現状 メディア化とは 自社サイトをメディア化するメリット 運用コストについて 費用対効果について 記事を書く際に意識している事 失敗した事、大変だった事 今後の展開

先日Developers Summitデビューしました。こんにちは、先生です。 前回公開した記事「エンジニアがいい感じにフロントエンド開発を爆速化できる環境構築の手順」の反響が大きかったので、そこで使われているWebPackというModule Bundlerをもう少し深く掘り下げていきたいと思います。 WebPackとは WebPackは静的なファイルの依存関係を解決しつつ結合したり分割したりするツールです。非常に多機能でカスタマイズの幅が広いのが特徴です。 http://webpack.github.io/docs/ 個人的な経緯ですが、require.js -> Browserifyを経てWebPackに落ち着いたところです。 WebPackはnpmを使ってインストールします。 npm install webpack -g ※ npmが使えない方はまずNode.jsをインストールしてく