こんにちは！ BiTTチームのキー坊です。 今日はお題の通りNASを作っていこうと思います。 というのも、この記事を書いている2021年5末で、Googleフォトの無料利用が終了するということもあり新しいストレージ先を探しています。NASもその候補の一つですが、値段高いものが多いため手が出しにくいですよね。 うちにも稼働しているNAS（QNAP TS−231P）があるのですが、そろそろ容量逼迫が見え始めてます。調べてみると自作で安く仕上げることができるようなのですが、やはりパフォーマンス面が心配ですよね。 その辺りの疑問にお答えするような記事にしましたので、最後まで読んでもらえると嬉しいです！ 僕と同じようなストレージ難民な方いましたら、ぜひ参考にしていってください。 用意するもの ラズパイ4（ラズパイ3でも動作すると思いますが、LANが遅いので非推奨） データ保存用USB接続HDD NA

LINEのやり取りにかかせないスタンプ。自分でオリジナルのスタンプを作ってみたい、家族や友人と楽しめるスタンプを作りたいと思っている人も多いのではないでしょうか。 今回はスマホでも作れるLINEスタンプの作り方や12万個売れたLINEスタンプを作ったコツを紹介します！ デザインの世界に飛び込んでみませんか？ Illustratorが使えるようになりたい、クリエイティブな仕事がしたい……という方は「スクールでの勉強」もおすすめです。弊社のスクールでは、未経験から6ヶ月でWebデザイナーを目指せます。スクールでどんな内容が学べるのか、ぜひ一度詳細をチェックしてみてください！ 👉「デジタルハリウッドSTUDIO by LIG」詳細へ ※この記事は2022年8月に編集部が情報を更新しました LINEでオリジナルスタンプを作成する方法 さっそくLINEスタンプ作成の流れを紹介します。 オリジナルス

Dockerのインストール ラズパイのターミナルを開き、以下のコマンドでインストールできます。使うのはターミナルだけなので、sshとVNCのどちらでログインしても問題ないです。 $ curl -sSL https://get.docker.com | sh ラズパイへのDockerインストールは6、7年前にもチャレンジしたことがあったのですが、当時は有志の方が作成したイメージを使用する必要があったと思います。ARMのイメージも少なく自分でビルドする必要があったことも、当時諦めた要因の一つでした。最近は簡単になっており、感動です。 あとは自分のユーザーをDockerグループに追加します。 $ sudo usermod -aG docker {ユーザー名} ついでに自動起動もしておきます。 $ sudo systemctl enable docker ここで、一度ログアウトして再度同じユーザー

エクセルやパワポで作るよりもいろいろな利点があるため気に入っているのですが、思わぬところに落とし穴があったりと、いろいろ工夫が必要なところがあります。 そこで今回は、私がXDで画面仕様書を作る際に気をつけていることと、おすすめの作り方をご紹介します。 今回は下準備編です。 下準備その1：前提資料一式を作る まずはXDで画面仕様書を作る前に、必要な前提資料一式を作ります。これらを作らずに画面仕様書を書き始めてしまうと、書き方が迷走したり、 一つの資料に情報を詰め込みすぎた見にくい資料になってしまいます。 最低限、以下の資料は事前に作るようにしています。 サイトマップ ディレクトリマップ（テンプレート一覧） コンポーネント一覧 フォーム入力項目一覧　　※フォームがある場合 CMS編集項目一覧　※CMSがある場合 いずれも一覧系の資料になります。画面上の細かい仕様を決める前に、これらの資料を通し

こんにちは、株式会社LIG Webディレクターのイナッチです。 Webディレクターといえば、サイト制作プロジェクトの提案や要件定義のフェーズにおいて「サイトマップ」を作る機会が多くあります。 とてもシンプルなフォーマットなので、誰でも作れるように思いがちですが、実は奥深く、取り組み甲斐のある作業の一つだと思っています。このシンプルな図のクオリティによって、その後のプロジェクトが円滑に進むかどうかを左右することさえあると感じています。 そこで今回は、私がサイトマップを作るときに意識していることと、サイトマップの能力を拡張するためのアレンジ技5選についてご紹介いたします。 ※ この記事でご紹介する「サイトマップ」とは、サイト全体の構造を図示した資料のことであり、XMLサイトマップ（sitemap.xml）の作り方については含んでおりません。 サイトマップの基本的な体裁 まずはサイトマップの基本

まいどです。テクニカルディレクターのやなさんです。 さて、Web制作やサービス開発の現場ではもちろんのこと、仕事を進めるなかで「定例のミーティング」って絶対ありますよね？ ミーティングを行うということは、みなさん議事録やアジェンダを作成しているかと思います。 その週次・月次ミーティング用の議事録やアジェンダを準備する際…… 該当のフォルダを開いて ファイルをコピーして アジェンダを更新して メンバーへ通知する っていう作業を毎回毎回やっていたりしませんか？？ こういう作業って、単純に手間ですし、作業中のタスクを止めることで集中が切れてしまうことをとても非効率に感じてました。 ということで、自動で作成されるようにしてみました（一定の部分まで）。 LIGでは、ドキュメントはG Suite、コミュニケーションツールはSlackを利用しています。 今回、上記1・2・4が自動となるように、GAS（G

今回はなんと、Twitterをやっているビシネスパーソンなら多くの方がフォローしているであろう、株式会社ベイジ代表の枌谷さん（@sogitani_baigie）に取材させていただきました！ Web制作事業のマーケティングに携わる一人間としてベイジ社の取り組みや枌谷さんの発信は数年前からずーーーっと追いかけてきたので、完全なる同業者にも関わらず（汗）こんな貴重な機会をいただけて本当に光栄です……！（涙） 制作会社で働くみなさまはもちろんのこと、自社のお問い合わせを増やしたい経営者・マーケターのみなさまもぜひぜひご一読ください！ 年間400件超のお問い合わせを獲得するまでに取り組んできたことまこりーぬ：枌谷さん、本日はどうぞよろしくお願いいたします！ 年始に公開されていたベイジの2020年の抱負ブログを読んで驚いたのですが、ベイジさんはものすごい数のお問い合わせを獲得されていますよね！？ 枌谷

令和ですね。こんにちは。バックエンドエンジニアのまさくにです。ゴールデンウィークで休んでいたら、シュワシュワと筋組織が融解し、「自然に帰ろう……自然に帰ろう……」と遺伝子に刻み込まれた内なる声が僕を光射す方へ誘いました。もはや社会復帰は難しいかもしれない。 さて。さてさて。 皆さま、いかがお過ごしですか。新しい期に入り、心機一転したい気持ちでしょうか。何ならアレですか。お持ちのWebサイトをリニューアルしたい、そんな気持ちをそろそろお持ちでしょうか。 失礼ながら、そのお気持ち、 たぶん5ヶ月、遅いです！ 仕事としてWebサイトの制作に携わってから、5年くらいが過ぎました。現在はバックエンドの作業を行いながら、TD（テクニカルディレクション）やPM（プロジェクトマネージャー）として、プロジェクトに関わることも増えてきています。その観点から言って、お客様と我々の間には「Web制作」の考え方にお

こんにちは。フロントエンドエンジニアのつっちーです。 ここ数年、スマートフォンの画面サイズがどんどん大きくなっていますよね。何年か前までは幅320px表示の端末がほとんどでしたが、今の日本では幅375px表示の端末がもっとも使われているようです（2019年2月現在）。幅375px表示が、他国で圧倒的1位の幅360px表示を大きく上回っているのは、日本人のiPhone好きが表れた結果でしょうか。 これに合わせ、LIGでもスマートフォン表示のデザインは幅375px表示に最適化することがほとんど。でも、その場合に問題となるのが、幅320px表示の端末です。見出しの改行が必要になったり、横並びの要素が収まりきらなくなったり、表示くずれが多々発生します。ブレイクポイントを増やして、スマートフォン表示だけで2種類もスタイルを用意するのは、なかなか大変です。かといって、いまでも見捨てるにはまだ早いシェア

こんにちは。 バックエンドエンジニアのまさくにです。 最近はありがたいことにアプリケーション系の案件も増えてきましたが、弊社のビジネスのメインストリームは、やはりコーポレートサイトのリニューアルをはじめとするサイト制作。 もっと言えばWordPressサイト制作なわけで。 「コンテンツを更新する必要がある」というご要件をいただくと、管理画面がすでに用意され、拡張性が高く、弊社ではもっとも開発工数が少なく済み、CMSとしていい意味で枯れている。それらのメリットを享受できるため、第一選択肢にはやっぱりWordPressが挙げられます。 ですが……。 WordPress、デプロイ面倒過ぎやしませんか。 この辺、何がデファクトなんでしょうか。皆さん、各々でやっている気がしますが、管理画面でそのほとんどの管理ができるという特質が「WordPressは簡単だ」という油断を生み、多くの障害を発生させてい

こんにちは、デザイナー兼フォトグラファーのおまめ （@omame_creator） です。 今回はPhotoshopで写真を切り抜く方法、髪の毛のような細かいものをきれいに切り抜く方法、背景と馴染ませる方法を解説します。 どれも私が試して一番短い時間で簡単にできた方法なので、ぜひ試してみてください！ 独学でつまずいていませんか？ Photoshopの使い方を効率的に学びたい、プロのデザイナーに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGでもWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。「今すぐスクールの概要を知りたい！」という方は、ぜひこちらより資料をご請求ください。 ※この記事は2022年3月に編集部が情報を更新しました 「選択とマスク」を使って髪の毛を切り抜く方法 髪の毛を目立たせるため、強めになびかせた

・ ・ ・ 364人から応募きた(^o^)/ え。なになになに。 どうしたみんな。 来たの？モテ期が来たの？ それとも生まれてから潜在的なモテ期だったのが30歳を目前にしてついに顕在化したってこと？ねぇなんなの神様。私、意味わからないよ。 ※記事公開時はまだ29歳でした。 正直、こんなに応募来ると思ってなかった まず、今回の企画は私の彼氏募集サイトを作ることで、誰でも簡単にウェブサイトが作れちゃうAiDジェネレーターの紹介をするという流れだったんだけど、私ってほら仕事熱心だからそういうPRの案件があるから手伝ってくれって同僚に言われて、「じゃあ人生かけて彼氏募集しますね」なんて軽い気持ちでやっちゃったんだけど、正直応募が来るなんて思ってもなかったから、記事を公開して応募がきたあとの事なんてなんにも考えてなかった正直申し訳ないごめんみんな。 でもね、聞いて。私ってもうそれはそれはLIGの全社

こんにちは。LIGライターののっち（@nocci_84）です。 突然ですが私は今、沖縄県宮古島（みやこじま）にきています。 「名前は聞いたことがあるけど、どこにあるの？」と思う方も多いでしょう。沖縄本島から飛行機でさらに１時間弱程、地図で見ると日本よりも台湾に近い位置にある島が、宮古島です。 今回そんな宮古島に、とある会社がサテライトオフィスを構えるらしく、取材をお願いしたいと声をかけていただき訪れたのですが…… どこまでも続くクリームソーダ色の海も、太陽の光を受けてキラキラ光る白い砂も、あまりに美しすぎて…… なんか、もはや、うさんくさい。 この海、実は人工なんじゃないか。わたしは騙されているんじゃないか。そんな気さえしてくるほどの美しさです。 本当にこんな夢見たいな場所に、サテライトオフィスが立つんでしょうか……。 ・ ・ ・ ・ ・ 「お待たせしました、のっちさん。ようこそ宮古島へ！

こんにちは。WebディレクターのJackです。 ぶっちゃけ、Web担当者は「サイト制作にいくらかかるの？」ということが気にかかりますよね。とくに皆さんによく聞かれるのはディレクション費について。 「ディレクション費？ プランニング費？ いらないでしょ？ 値引きしてよ！」 そう思った方！ それは危険です！ Webディレクターの働きは目に見えづらいため、そう考える方も多いとは思います。しかし、プロジェクトの成否はWebディレクターにかかっているといっても過言ではありません。 本記事では、ディレクション費の内訳や、Webディレクターの役割、必要性についてご説明できればと思います。 ディレクション費ってなに？ Web制作におけるディレクション費とは、一言でいうとWebディレクターの稼働対価のことです。いわゆる人件費ですね。 たとえば下記のような稼働に対してかかってきます。 打ち合わせ（ヒアリング）

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

こんにちは。LIGフィリピン支社代表のせいと（@seito_horiguchi）です。 僕のモットーは「ラクして作る」で、日々怠けながらコーディングをしています。その際に役立つのが、便利なライブラリやらプラグイン。おかげで毎日2〜3時間ほど昼寝に費やすことができています。 さて、今回は実際に僕が使ったことのあるJavaScriptのスライダープラグインで、特に人気の4つを勝手にレビューしてみます。導入を検討されている方は参考にしてみてください。

こんにちは、エンジニアののびすけです。 さて、今回はDrone（ドローン）の話です。注目されてますよね〜。 以前、株式会社フォークの石射さんにParrot DroneをNode.jsで制御するやり方を教わりました。その後、自分で購入して少しずつ触っています。 そして、初めてDroneを飛ばしたときに感動したので、その勢いで社内勉強会も実施しました。 参加者はディレクターやデザイナーといったエンジニア以外の職種の人のほうが多かったのですが、Droneを問題なくプログラム制御することができました。 今回は、社内勉強会でやった内容をもとに、 ノンプログラマな読者のみなさんもDroneをプログラムで制御できるようになる7つのステップを紹介してみたいと思います。 ▼ テクノロジーをおもしろがれ！

こんにちは、ディレクターのなかみーです。 新人ディレクター向けシリーズの最終回ですね。 今回は、企画書を書くときに役立つ統計やアンケート結果などを公開しているサイトをご紹介したいと思います。 データで一番重要なのは、それが本当に“信頼できるものか”ということ。 発表元が信頼できる会社であればそのデータの信頼性は高いですし、100人に聞いたアンケート結果よりも10万人に聞いた方がより正しい統計データを得ることができますよね。 企画書に使えるような信頼できるサイトをまとめたので、お役立てください。 1. StatCounter http://gs.statcounter.com ブラウザのシェア率などを調べるときに使えます。 全世界だけでなく、日本国内で使われているブラウザにフィルタリングすることもできるのが便利です。 2. Similarweb http://www.similarweb.c

SEOの基本中の基本！主要なHTMLタグ「titleタグ」「meta description」「h1タグ」の書き方まとめ こんにちは、じつかわです。ナイルという会社でSEOコンサルタントをやっています。 さて、いきなりですが、皆さんがSEOを勉強し始めたとき、一番最初に覚えたことはどんなことでしょうか。おそらく「titleに対策キーワードを入れる」ことではなかったでしょうか。 「title」「meta description（メタディスクリプション）」「h1」というあたりのHTMLタグは、SEOでは非常に重要な役割を果たします。 とくに「titleに対策キーワードが入っていなければ、SEOはほとんどできない」といっても過言ではないほど、検索エンジンの評価において主要HTMLタグにキーワードが含まれていることは重要です。 SEOに取り組んでいる人であれば「そんなの普通にやってるよ！」と言われ

OGP画像はというと、次に説明する「テーマオプション」にも関わりますが、オプションで「Facebook Ogp Image」という項目を追加したうえで、以下のように設定をします。 {block:IndexPage} {block:FacebookOgpImage}<meta property="og:image" content="{image:Facebook Ogp Image}">{/block:FacebookOgpImage} {/block:IndexPage} {block:PermalinkPage} {block:Posts} {block:Photo}<meta property="og:image" content="{PhotoURL-HighRes}">{/block:Photo} {block:Panorama}<meta property="og:image"