ウェブサイトやフリーペーパーなどを作る際に無料で高画質の写真は必須。2019年11月29日の「いい肉の日」に宮崎県小林市が公開したお肉のフリー素材サイト「oniku images」は、その斜め上の完成度が話題を呼んでいます。 お肉のフリー素材サイト oniku images｜宮崎県小林市 http://www.tenandoproject.com/onikuimages/ トップページはこんな感じ。画面をスクロールしていくと…… まずは「肉画像には無限の可能性がある。その可能性の一端を、追求してみました！」ということで、独特のテーマに沿った「oniku museum」というカテゴリが現れます。「あの待ち受け肉」「新肉発表会」といったタイトルと共に、どこかで見たような気がする画像が並びます。 美しく配置されたお肉の前に黒いタートルネックの男性が立った「新肉発表会」をクリックしてみると…… ウ

以前まではJavaScriptでないと実装できないと思われていたものも、最近ではHTMLとCSSのみで実装できるものが増えてきました。HTMLとCSSには新しい機能が追加され、そして古いブラウザのサポートも必要なくなり、より簡単に実装できます。 実はJavaScriptを使用せずに、HTMLとCSSで実装できるUI要素を紹介します。 You can create these elements without JavaScript by Adrian Bece (@AdrianBDesigns) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに レスポンシブ対応のテキスト省略 スター レイティング ツールチップ・ドロップダウンメニュー モーダル フロートするラベル アコーディオン・トグル 終わりに はじめに スマホやWeb

◆ Glide https://go.glideapps.com/ 紹介 「Glide」は、Googleスプレッドシートをストレージとして、ノーコードでアプリライクなWebサイトを構築できます。 事前準備 こちらがホーム画面。動画チュートリアルも充実しています。 アプリはスクラッチから作れるほか、7種類のテンプレートも用意されています。今回は、テンプレートの1つ「Conference」をベースに作っていきます。 まずは、左下にある「Coopy to my apps」からテンプレートをコピーします。 すると、My Appsに保存され DB代わりになるGoogle スプレッドシートもコピーされました。 データを編集する それでは実際に、テンプレートを編集しながらアプリを作っていきます。 まずはプロダクトの肝となるデータの編集からです。 データは、テンプレートをコピーした際にできたGoogleス

「即戦力レベルのwebデザイナーが最低限持っている知識を1カ月で身に付ける」ということを目的としたドリルを作りましたので、皆様に公開します。 ダウンロード[PDF/PSD/XD]（92MB） 本ドリルは、約140ページの参考書兼問題集になっています。まずは出題される問題を解き、その上で解説を読んで理解し、再度問題を解きなおすのが基本的な流れです。 内容は、私たちが未経験デザイナーの採用を進める中で、「こういう知識は早い段階で身に付けておいてほしいよね」という知識をまとめました。また演習用のPSD/XDファイルもドリルに含まれています。 身に付くのはあくまで「即戦力クラスの知識」であって、「即戦力」になれるわけではありません。デザインには、非言語・非定型なスキル領域も多々あるため、座学だけで即戦力にはなりません。しかしそれでも、ベースとなる知識は絶対に必要ですし、それを指南する参考書は、的を

デザイン 2019/10/25 Webデザインは独学でマスターできる？身に付けるべきスキルとオススメの勉強法まとめ Webデザインが優れているかどうかは、閲覧者のサイト滞在時間やそれに伴う収益に大きく影響します。Webデザイナーという職業も一般的になってきましたが、多くの人は、学校などで専門知識を身に付けなければならないと考えています。 この記事では、「Webデザインとは何か」から「独学でのWebデザイン勉強方法」までをご紹介します。 Webデザインは独学できる？Webデザイナーの仕事＆スキルとは Webデザインに関する知識は幅広く、完全な独学で学ぶのは難しいでしょう。ただし、本や動画などを上手に活用すれば、スクールなどに通うことなく学習することができます。 Webデザインの知識を身に付けると、 就職の時に使える「ポートフォリオ」を作成できる Webデザイナーは比較的新しい職種のため求人数

こんにちは。デザイナーのまべです。 すっかり季節は秋めいてきましたが、秋は採用市場が活発になる季節です。そこで昨今気になった採用サイトをいくつかご紹介したいと思います。 S-GROOVE https://www.s-groove.co.jp/freshers/ カラフルな配色の中に質の高い社員さんのポートレイト写真が特徴的なこちらのサイト。いろんなギャラリーサイトや雑誌にも載っているので知っている方も多いと思います。 大きめに配置されたタイポグラフィとメニュー、ボタンでユーザビリティを担保し、支給の写真とも思われる写真もデュオトーンに加工して全体のトンマナを整えています。淡い配色ながら大人っぽく、センスの良い会社というイメージを醸成させるデザインに仕上げています。 つばめタクシー大和グループ https://tsubametaxi-yamato.com/ 鳥に擬態した青い人の写真のビジュア

※はてブの総合ホッテントリと、noteの公式マガジンに入りました！ こんにちは。Kazutaka Shimizuです。

モバイルサイト改善を考える上で、今最も注目されている技術の一つが「PWA」です。「名前は聞いたことがあるけれど、詳しくは知らない…。」という方も多いのではと思います。 PWAとは、簡単に言うと「モバイル端末でウェブサイトを表示するときに、まるでネイティブアプリのような動作を可能にする仕組み」のことです。サイトへの流入を増やす施策としては、SEO対策やコンテンツマーケティングなどが考えられますが、PWAを導入することで、サイトそのものの改善（表示速度などの技術的な改善）に繋がり、より一層の効果が見込めます。 今回は、PWAについての基本的な仕組みやメリット、導入事例をご紹介します。 PWAとは？ PWAとは「Progressive Web Apps」を略した言葉で、モバイルサイト上でネイティブアプリのようなユーザー体験を提供する技術です。ウェブとアプリの両方の良さを兼ね備えています。 インス

HTMLやCSSはブラウザのアップデートによって使えるものが増えたり、より簡単に機能を実装できるようになることがあります。 少し前まではJavaScriptで行わなければならなかったことが、HTMLとCSSだけで行えるようになったりするので、最新情報にキャッチアップすることでより効率的にコーディングを行えるようになります。 今回は、HTMLとCSSの小技やテクニックをご紹介したいと思います。 1. ダークモードの時にスタイルを変える 最近のOSでは、通常のカラースキームと別に「ダークモード」が搭載されるようになりました。 prefers-color-scheme: darkを指定することでダークモードが設定されている場合のスタイルを別で記述することができます。

半導体は韓国の看板商品です。スマートフォンの普及やIoTの進展を追い風にしたメモリーの好調で、輸出額は最近10年で4倍に成長。2018年には1000億ドル（約11兆円）を突破しました。現在は輸出全体の20％近くを半導体が占めています。半導体産業の浮き沈みは韓国経済の「体温」を決めます。 GDP成長率を下方修正 韓国の半導体輸出は急減速 半導体輸出は米中貿易摩擦の余波で18年後半から急減速。足元では前年より約3割少ない水準です。7月、韓国政府は19年のGDPの実質成長率見通しを2.4～2.5％と、昨年12月時点の2.6～2.7％から引き下げました。7年ぶりの低成長です。 企業業績にも暗雲 サムスン電子の連結業績 （四半期ベース） ※19年4-6月期は速報値 半導体市況の悪化で、サムスン電子は19年4～6月期の営業利益が前年同期から6割減りました。中国政府が産業政策のロードマップ「中国製造20

HTMLだけで多くのことが実現できるのは素晴らしいことです。一昔前までは、CSSやJavaScriptを使用しなければできなかったこと、かなり複雑なコードを書かなければできなかったことが、実はHTMLだけで多くのことが実現できます。 知っておくと便利なHTMLの使い方をまとめて紹介します。 HTML can do that? by Ananya Neogi 先日紹介した「CSSでここまでできるのか！」の続編です。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. datalist -フォームに入力候補を表示 2. dialog -ダイアログ ボックス 3. progress -プログレスバー 4. detailsとsummary -開閉パネル 5. inputmode -スマホで入力時に適したキーパッドを表示 6. inpu

ブログ運営で大切なことは、公開した記事がきちんと読まれることです。週刊はてなブログではSEO専門家の辻正浩さんに、現在のFavicon（ファビコン）の重要性と注意すべきポイントについて寄稿いただきました。どうぞお読みください。 SEO専門家の辻正浩( id:t-w-o )です。はてなブログのSEOをサポートしている外部スタッフとして、これまでも何度かはてなブログのSEOについてご紹介*1してきました。今年の6月から株式会社JADEを立ち上げてJADEの辻として活動しています。 今回は、はてなブログでも対応可能なFaviconの価値についてご紹介します。 モバイル検索結果にFaviconが登場 検索結果で選ばれるためのFaviconの作り方　5つのポイント サイズは48ピクセルの倍数 透過は使わない 複雑なものにはしない 正しく指定をする あなただけのFaviconに Faviconを設定す

先日リリースされた複数の質問に答えるだけでホームページが作成できる「ジンドゥー AI ビルダー」はお試しいただけましたか？　ジンドゥー AI ビルダーとは、AI があなたにぴったりのホームページを作成してくれる近未来的なホームページビルダーです。 AI が作成したホームページはデザインの変更ができないのでは？  と思われているようですが、もちろんホームページ完成後も自由に変更することができます！ 今回の記事では、ジンドゥー AI ビルダーをもっと活用していただけるように見落とされがちな AI ビルダーの機能とホームページ改善のためのヒントやコツをご紹介していきます。 ジンドゥーではシステムページと呼ばれる、自動生成されるページがあります。システムページには、404 ページやエラーページとも呼ばれるホームページ訪問者が URL を間違えて入力したり、ページ内のリンクが非表示のページに設定され

普段の生活を送る中で、日本のグローバル化を肌で感じることが多いのではないでしょうか。さらに、2020 年には東京オリンピックも開催されるので外国人旅行客が今よりももっと増加することが予想されており、日本のグローバル化に伴って、ホームページもグローバルに対応していくことが求められてきています。 この記事では、そのようなグローバルに対応した「ホームページの多言語化」について取り上げていきます。ホームページを多言語に対応にするべき理由やメリット、そして作成する際のテクニックなどをご紹介します。 ホームページの多言語化とは、複数の言語で作成されたホームページのことです。通常、日本を拠点にしているのであれば、ターゲットは日本人（もしくは日本に住む日本語を話せる外国人）になります。反対に多言語に対応したホームページだと日本を拠点にしながらも、ターゲットは日本人や外国人へと幅広く構えています。 ホームペ

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog デザイン特集5本目、最後の記事です。 こんにちは、ブランドマネジメント室デザイナーの上田絵理です。 サービスロゴやアイコンの作成や管理、けんさくとえんじんというキャラクターの担当をしています。 私が入社した1999年当時は社員が100人くらいで、全員の顔が覚えられるくらいだったのですが、入社してから20年たった今、社員数は6500人超*1...！ 　インターネット環境とデバイスの変化とともに進化してきたYahoo! JAPANのトップページを、デスクトップ風のビジュアルで表現してみました。移り変わるウェブデザインの歴史をお楽しみください。 1996年　アメリカのYahoo!のデザインを踏襲 1996年4月に国内初の検索サイトYah

本当にデザインをAdobe XDメインで納品できるの？ XDについていくつも記事を書いている私ではありますが、 実は、XDでデザインを納品まで仕上げたことが、まだありません。 なので、この春からXDを使おう！ と決意したあなたとほぼ同じスタートライン。今までXDを使ってきて、それはもうXDでスライドを作るくらいぞっこんなわけですが、デザインをすべて仕上げようと思うと、まだちょっと不安もあります。 今回は、実際に手を動かしながら、デザイナーが思っているであろうそんな不安について、検証してみようと思います。 不安ポイント①：他のアドビ製品との連携はできる？ IllustratorやPhotoshopとの連携はもちろん可能！ 連携方法はいくつかあります。 特定のパーツなどをAdobe XDに使いたい！ というとき IllustratorやPhotoshopからのコピペ 編集中（展開中）のXDファ

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

どうも、まさとらん（@0310lan）です！ 今回はGitHubと連携してソースコードをさまざまな用途に活用できる便利なWebサービスを厳選してご紹介しようと思います。 特にWeb開発を便利にしてくれるサービスを中心に、GitHubだけでどこまで作業効率を向上できるのかをぜひ確認してみてください！ なお、paizaラーニングでは「Git入門編」講座を公開しています。そちらも合わせてチェックしてみてください。 ■GitHubをフル装備のクラウドIDEに変えるサービス！ 【 Gitpod 】 GitHubに置いているリポジトリのソースコードを統合型のクラウドIDEで自由に編集できるサービスが「Gitpod」です。 TheiaをベースにしたVS Codeライクなコードエディタで、豊富な機能と拡張性を備えておりプログラミングに最適なIDEの一つと言えるでしょう。 使い方は簡単で、リポジトリのページ

多！ そのため、仕様の洗い出しが不十分になりがちになる、という点で厄介です。 ただし、今はSwiper, Slickといった優秀なプラグインがあります。こいつらは大抵の仕様は満たしてくれますので、積極的に使うと良いと思います。 参考 Swiper Slick フィットスクロール 厄介度：★★★ 紙芝居スクロールなどといったりもします。 海外のオサレなブランディングサイトや、ランディングページなんかでたまに見かけますね。 カッコイイ！うちもこんなんやりたい！と思うかもしれません。がしかし…… イメージ ハマりポイント スクロールに関する他の機能実装 これを実装する場合ブラウザにデフォで備わっているスクロールは使わず、別の方法（CSSのtransformとJSを組み合わせるなど）で実装することになるかと思います。 するとまず、スクロールイベントが取れないんですね。 そのため、スクロールに合わせ