こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 コーディングをしていて、クラス名に迷うことってありませんか？ ボタンや見出しといった、比較的単純なコンポーネントなら「.button」「.headline」など、すぐに思いつくかもしれません。 しかし、それが複雑なコンポーネントだったりすると、なかなか思いつかないものです。 そんな悩みを解消したいと思いまして、いろいろなサイトのソースコードを見て、開発者がどんなクラス名をつけているのか調査してみました。 今回は、その中からよく使われていたクラス名と、「これはナイスネーミング！」と思ったクラス名をピックアップしたいと思います。 thumbnail サムネイル画像。 アイキャッチ画像やギャラリーページの画像一覧などで用いられます。 avatar ユーザのアバター画像。 Webサービスのユーザ情報ページや、ブ

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

提案書や企画書の作成は慣れが大事。慣れるまでは効率のいい作成の仕方がわからず、完成までに膨大な時間を要してしまう人もいるのではないでしょうか。 今回は「ほかの人の企画書を盗み見できるサイトやページ」をご紹介します。見せ方や考え方、そしてそれを先方に伝えるためのノウハウが詰まりまくっているので、見て損はないと思います。 それでは、見てみましょう！ 未経験から6ヶ月でWebデザイナーを目指しませんか？ クリエイターに興味があるけどなり方がわからない、Web業界への転職を目指している……という方は、「スクールでの勉強」もおすすめです。将来について悩んでいる方はぜひ一度LIGにご相談ください！ ▼少しでも気になる方は、ぜひ公式サイトをご覧ください！ さまざまな企画書を盗み見できる Web サイトまとめ 1. alle https://the.alleslide.com ボリュームがすごいです。 2

24で入社し、28で専務取締役に就任し、出産や離婚などを経験して気がついたら32、社長就任が目前にあっていよいよ裸足で逃げ出したい九州ライターの村上です皆さんこんにちは。 社長就任はぶっちゃけ楽しみです。実権を掌握するのに8年かかりましたけれどようやく私の時代が来た！という気持ちでして。 しかしやっぱり不安もあって、そんな時に心の支えになるのが「人生を豊かにするためにこれやっとけー」という数々の自己啓発本。読み過ぎると逆にヘコむので自分目線でこれは大切ということをまとめておきたいと思います。 1.人生の基板となる30代に人生で最も大切な3つを選ぼう パートナーや仕事を何度もチェンジしていては、そのたびにまた最初からやり直しになります。それではいつまでたっても、人生は積み上がっていきません。 30代にどんなパートナー、ライフワークを選び、どんな人と付き合うかが、残りの人生の幸せ度、豊かさ度を

こんにちは！ LIGの副社長のゴウです。 俺の部下に「そめひこ」って奴がいるんですが、いま俺は彼の自宅に来ています。 見てください。この殺風景な部屋。 シンプルですが、あまりにも殺風景な部屋ですね。 今回、「そめひこの家で撮影をしたいから使わせて」と許可を取った上で、この部屋を200万円ほどかけて勝手に改造してみようと思っています。 とりあえず15分ほどでめっちゃ部屋がスッキリしました。荷物なさ過ぎ。 さぁ、こんな殺風景な部屋とも今日でサヨナラ。いつも頑張って仕事をしてくれている可愛い部下を喜ばせたいと思います。 インテリアのプロにお願いしてみた さて、実は今回の撮影をするにあたり、インテリアのプロに協力を仰いでおりました。 それがこちらのショールームを構えるインテリアショップのリグナさんです。 ショールームが東京駅からタクシーでワンメーターの所にあるのですが、なんでしょうねこの空間。 ヤ

こんにちは。ディレクターのあかねです。 春は新しいモノが欲しくなります。ネットショッピングをしているとあれも…これも…とついつい買いすぎてしまいますね。 また、デザインがステキなサイトは商品も魅力的に見えるのでついついポチッと… ステキなサイトはきっと売れてるんだろうなーと思って、デザインのステキなECサイトをまとめました。 楽天サイトも5サイト紹介しているので参考にしてください。 ECサイトを作るときに参考にしたいサイト10選 Sophie et Chocolat ソフィー エ ショコラ Sophie et Chocolat ソフィー エ ショコラ 女の子が好きなメルヘンチックなサイトです。下層ページもかわいいのでぜひ。 kimito / 七宝焼き・着物の帯留め 通販・ギフト kimito / 七宝焼き・着物の帯留め 通販・ギフト 細かいアイコンが視認性を高めてるなと思います。 OTOE

最近東京にこなれてきたどうも僕です。何がこなれてきたって？電子マネーさ！東京ならSuica、Edy、Waon、なんでもタッチで買えちゃうんだぜ！コンビニで清算するとき、「支払いはEdyで」と一言、そして、読み取り機にソフトタッチ。支払いのシャリーンという音とともに僕の白い歯がキラーンとかがやくのさっ！ そんな東京にこなれてきた僕が、今日はjQueryを使う上で気をつけておきたいポイントを何点か紹介しようと思うよ！ jQueryって便利だけど、もとはJavaScriptで、インタプリタ言語で、コンパイル時に最適化なんてされないから、書き方一つで意外とパフォーマンスに差が出てくるんだよね！開発時は高スペックのPCで見てるから気づかないかもしれないけど、あなたのサイト、低スペックマシンとかモバイル端末でみたら、もっさもさかもよ！ っというわけで、jQueryを使う上で気をつけたいポイントを挙げて

どうも〜こんにちはぁ！最近カナダから日本に戻ってまいりましたライター、のび太です。いや〜やっぱり日本はいいですね～。なんといっても牛丼が安くてウマい！！ さて、LIGではこれまでWeb制作者にとって役に立つ様々な記事が公開されましたが、かなり数も増えてきたので、今回はそれらを分野別にまとめてみました。 時間のない方も、ぜひ一旦ブックマークなどをしておいて、週末なんかに一気に読んでもらえたらいいと思ってます。この機会にWeb力向上を目指しましょう！ Web制作者に役立つ記事ジャンル別のまとめ Web制作者にとって便利ツールは欠かせませんよね〜。作業時間が何十、何百分の一にも短縮されることもあると思います。場面によって適切に使い分け、どんどん効率化を図っていきましょう。 ■Windowsユーザー必見！普段使い＆制作に役立つ便利ツール5選 https://liginc.co.jp/web/too

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

どうも〜こんにちはぁ！ Web制作者として日々勉強中でありますライターの、のび太です。 先日「Webが学べる海外サイト10選」をご紹介させていただきましたが、もちろん国内サイトでも、Webに関してガッツリ学べる有益なブログはたくさんあります。 国内サイトでは、およそ80ぐらいのWeb系ブログをRSS購読させてもらっていますが、今回はその中でも厳選に厳選しまくった「これはWeb屋なら絶対必須でしょ！　もはやお金取られてもいいレベルや！」って感じた10個をみなさんにシェアしたいと思います。 また、大変恐縮ながら、個人的にベスト3だと思った記事（特に有益だと思った記事）も一緒にご紹介させていただきます。 【こちらもおすすめ】 ☞ Web制作者がマジで学べる国内ブログ厳選10個【制作+SEO対策編】 Webクリエイターボックス http://www.webcreatorbox.com/ あまりにも

こんにちは、日々WordPressをカスタマイズしているエンジニアのひろゆきです。 今回はWordPressのカスタマイズの際に活躍するフィルターフック、アクションフックについてまとめました。 本稿ではフックを知ってもらって、とりあえず使ってみることを目的としますので、詳しい動作原理や本来の目的などについてはCodexなどを見てくださいね！ 参考：プラグイン API – WordPress Codex 日本語版 http://wpdocs.sourceforge.jp/プラグイン_API また、過去に弊社CTOのづやが便利なアクションフックについての記事「wordpressでよく使った管理画面用アクションフック」を書いておりますので、こちらもあわせて見てみてください！ フィルターフック、アクションフックとは まずはフィルターフックとアクションフックの違いについてですが、それぞれフックの種類

勉強欲が強いディレクターの鮫島です。 普段みなさんは知識を得るためにどのような勉強をしていますか？？ 本を読んだり、セミナーに行ったり、Facebookのタイムラインに流れてくる技術系の記事を見たりすることが多いかと思います。 私も大体そうなのですが、最近それ以外にも勉強する方法を模索しています。 その中の1つとして、ちょこちょこ目に付くオンラインの「スライド資料」がとても分かりやすくて、ちょっとした合間に勉強できます。そこで、私が最近見た中でも、見やすくて勉強になったスライドをいくつかご紹介します。 ちなみに、オンラインのスライド資料サービスについては、過去にディレクターの勢古口が「より美しいプレゼン資料を共有しよう。オンラインプレゼンツール7選」でまとめていますので、ご興味あればこちらもご一読ください。 ディレクター向けのスライド資料まとめ IAシンキングによるモバイル再設計 内容 I

こんにちは。デザイナーのハルエです。 最近涼しくなってきましたね。私は自分があまり風邪をひかないせいか、「健康」に対して軽視しているところがあります。いつまでたっても自分は風の子元気な子だと信じきっています。そのせいかは分かりませんが、今は鼻水が止まらずのど飴を過剰に摂取しながら書かせていただいています。 ほんと健康って大事。 さてWEBデザイナーのみなさん、フォームのデザインって悩みませんか？ 登録フォームやお問い合わせフォームなど用途は様々ですが、最近はブラウザ標準のフォームを使用せず、CSS3やらプラグインやらを使っておしゃれに工夫されたフォームのまぁ多いこと。きれいで使い勝手のいいフォームデザインがしたい。でもコーディングに時間が・・ってことありますよね。私はちょっと苦手意識があったりします。 でも、サイトの窓口ともなるフォームは、WEBサイトを運営するにおいてとても重要な役割を持

今回は、ロゴや画像制作などのアイデア出しに気軽につかえるフォントビュワーを3つご紹介します。どのサイトも自分のPCに入っているフォントを一覧で表示してくれるWebサービスです。 独学でつまずいていませんか？ Webデザインの基礎を効率的に学びたい、現役デザイナーに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGではWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。詳細を知りたい方は、ぜひスクールの詳細をチェックしてみてください！ →スクールの魅力が分かる資料はこちら！（資料請求） ※この記事は2022年3月に編集部が情報を更新しました フォントを一覧表示してくれるサービス Wordmark Wordmark まずご紹介したいサイトがこちら。私が1番お世話になっているところです。 シンプルで使いやすい！　さらに表示も綺

こんにちは。モザイク大好き白浜です。今回はIllustratorでモザイク柄のアイテムを作ってみたいと思います。 1.モザイクの素を作る オブジェクトをタイル状に分割する手順 まずは正方形のオブジェクトを作成します。 次に「オブジェクト」→「ラスタライズ」します。 一度この手順を踏まないと「モザイクオブジェクトを作成」ができないのでいつもこうしています。 次に「オブジェクト」→「モザイクオブジェクトを作成」を選択します。 分割したい数を入力してOKを押すと・・・ 格子状に分割されました～。 色をつけてモザイク柄にする 格子状に分割されたオブジェクトはグループ化されているので、これを解除します。 するとタイルひとつひとつを個別に選択できるようになるので・・・あとは根気強く色付けします。色はあとから変更できるのでよしなにやってください。 0to255 同系色でまとめたいときは明度の違うグラデー

エンジニアの王です。 そもそも「素材」というのは「何かを作るための原材料」ですから、デザイナー・グラフィッカーなどにとっての「写真素材」とは、新しい何かを作るためのもととなる写真であって、ほぼそのままアイキャッチとして使ったり、記事内で使ったりするものではありません！ 同じ「写真素材」とは言っても、使い方によっては向き不向きっていうのがありますからね。今回は特にデザイナー向けの無料で使える写真素材サイトをご紹介します！ 私は「デザイナーに優しい写真素材」とは以下のような特徴を持っていると考えています。（もちろんすべてのケースに当てはまるわけではないが） 被写体が明確 背景が単純 同じオブジェクトを複数のアングルから撮っている テクスチャ系 切抜き済み そのため、今回は以上の特徴を多く持っている写真素材サイトだけに焦点をあてて紹介したいと思います！ おすすめ順で列挙していきますので、上位にき

Build Team Together デザインの知見とグローバルな開発体制を強みに、 貴社のDXを戦略設計から運用まで一貫してサポートします。